使用 jQuery 實現網頁元素水平垂直居中的完整指南 (CSS + JS 混合方案)

在響應式網頁設計中，讓任意尺寸的容器 (如彈窗、Hero 區塊、載入動畫) **始終保持視窗正中心** 是常見需求。純 CSS 方案受限於需預知元素寬高，而 jQuery 可動態計算視窗與元素尺寸，實現真正的「未知尺寸、隨視窗變化自適應居中」。本文對比三種方案並給出生產級程式碼。

方案對比總覽

核心程式碼：jQuery 自適應居中插件化寫法

HTML 結構

<div class="center-container" id="popup">
  <div class="center-content">
    <h2>響應式彈窗標題</h2>
    <p>內容高度隨文字變化，寬度自適應，永居視窗中心</p>
  </div>
</div>

CSS 基礎樣式 (關鍵：不設寬高)

.center-container {
  position: fixed;        /* 脫離文檔流，相對視窗定位 */
  display: none;          /* 初始隱藏，JS 顯示時再計算 */
  z-index: 1000;
  background: #fff;
  box-shadow: 0 4px 20px rgba(0,0,0,.15);
  border-radius: 8px;
  padding: 20px;
  max-width: 90vw;        /* 防止超出視窗 */
  max-height: 90vh;
  overflow: auto;
}
.center-content { /* 內容區樣式 */ }

jQuery 核心邏輯 (支援多實例、防抖、銷毀)

(function($) {
  $.fn.centerInViewport = function(options) {
    const opts = $.extend({
      throttleMs: 50,           // resize 節流毫秒
      onCentered: null          // 居中完成回調
    }, options);

    return this.each(function() {
      const $el = $(this);
      let resizeTimer = null;

      const doCenter = () => {
        // 強制顯示以獲取正確尺寸 (若原為 display:none)
        const wasHidden = $el.is(':hidden');
        if (wasHidden) $el.css({visibility: 'hidden', display: 'block'});

        const winW = $(window).width();
        const winH = $(window).height();
        const elW = $el.outerWidth();
        const elH = $el.outerHeight();

        const left = Math.max(0, (winW - elW) / 2);
        const top  = Math.max(0, (winH - elH) / 2);

        $el.css({position: 'fixed', left, top});

        if (wasHidden) $el.css({visibility: '', display: 'none'});
        if ($.isFunction(opts.onCentered)) opts.onCentered.call($el[0]);
      };

      // 初始居中
      doCenter();

      // 視窗變化重新計算 (節流)
      $(window).on('resize.centering', () => {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(doCenter, opts.throttleMs);
      });

      // 公開銷毀方法
      $el.data('centerInViewportDestroy', () => {
        $(window).off('resize.centering');
        clearTimeout(resizeTimer);
        $el.removeData('centerInViewportDestroy');
      });
    });
  };
})(jQuery);

// 使用範例
$('#popup').centerInViewport({
  onCentered: function() { $(this).fadeIn(300); }
});

// 關閉時銷毀
function closePopup() {
  $('#popup').fadeOut(200, function() {
    const destroy = $(this).data('centerInViewportDestroy');
    if (destroy) destroy();
  });
}

關鍵技術細節解析

1. outerWidth()/outerHeight() vs width()/height()

• outerWidth(true) 包含 margin、border、padding，定位計算必須使用
• 若元素有 box-sizing: border-box，outerWidth() 即為視覺寬度

2. position: fixed vs absolute

• fixed：相對視窗定位，滾動不跟隨，彈窗/Toast 首選
• absolute：相對最近定位祖先，頁面內區塊居中適用

3. 節流 throttle 防止 resize 暴風

瀏覽器視窗拖曳時每秒觸發數十次 resize，未節流會導致佈局抖動與 CPU 飆升。50ms 節流在視覺流暢度與效能間取得平衡。

4. 處理 display:none 元素尺寸獲取

隱藏元素 width()/height() 為 0。技巧：暫時設 visibility:hidden; display:block 獲取尺寸後復原，避免頁面閃爍。

進階場景：模態彈窗 + 背景遮罩 + ESC 關閉

.modal-overlay {
  position: fixed; top:0; left:0; width:100%; height:100%;
  background: rgba(0,0,0,.5); z-index: 999; display: none;
}

function openModal(selector) {
  const $modal = $(selector);
  $('.modal-overlay').fadeIn(200);
  $modal.centerInViewport({
    onCentered: () => $modal.fadeIn(300)
  });
  
  // ESC 關閉
  $(document).one('keydown.modal', e => {
    if (e.key === 'Escape') closeModal(selector);
  });
}

function closeModal(selector) {
  const $modal = $(selector);
  $modal.fadeOut(200, () => {
    const destroy = $modal.data('centerInViewportDestroy');
    if (destroy) destroy();
    $('.modal-overlay').fadeOut(200);
  });
  $(document).off('keydown.modal');
}

現代替代方案：CSS Flexbox/Grid (無 JS)

若專案支援現代瀏覽器 (IE11+、Edge、Chrome、Firefox、Safari)，純 CSS 即可完美解決：

.center-wrapper {
  display: flex;
  justify-content: center;  /* 水平居中 */
  align-items: center;      /* 垂直居中 */
  min-height: 100vh;        /* 佔滿視窗高度 */
}
<div class="center-wrapper"><div class="content">...</div></div>

結論： 新專案優先使用 Flexbox/Grid；需支援舊瀏覽器、或元素需脫離文檔流 (彈窗、Tooltip) 時，使用本文 jQuery 方案。