CSS 垂直置中最簡單的方法：align-content: center 一行搞定

網頁設計裡最常見的需求之一，就是把區塊裡的文字、圖片「上下置中」。以前的做法都要先把外層改成 display: flex 或 display: grid，但改了排版方式，裡面其他元素的排列也會跟著變，常常牽一髮動全身。

2024 年起，Chrome、Edge、Safari、Firefox 都支援在一般的區塊元素上直接使用 align-content，只要一行就能垂直置中。

用法

.box {
  min-height: 300px;
  align-content: center;
}

<div class="box">
  <h3>標題</h3>
  <p>這段文字和上面的標題，會一起在區塊裡上下置中。</p>
</div>

裡面的東西維持原本由上往下的排列，只是整組被移到區塊的垂直中間。

左右也要置中

align-content 只負責上下。左右置中再加上 text-align: center 就好：

.box {
  min-height: 300px;
  align-content: center;
  text-align: center;
}

瀏覽器支援

在一般區塊上使用 align-content，支援的版本是：

• Chrome、Edge 123 以上
• Firefox 125 以上
• Safari 17.4 以上

這些都是 2024 年上半年推出的版本，一般自動更新的瀏覽器都沒問題。不支援的舊瀏覽器會直接忽略這一行，內容仍然正常顯示，只是停在上方，不會壞版。

需要支援舊瀏覽器的寫法

如果網站的訪客有不少人用舊手機、舊電腦，可以改用傳統的 Flexbox 寫法，效果一樣：

.box {
  min-height: 300px;
  display: flex;
  flex-direction: column;  /* 裡面的東西維持上下排列 */
  justify-content: center; /* 直向排列時,這一行負責上下置中 */
}

這篇文章舊版提到的 display: flex 加 flex-wrap: wrap 再加 align-content: center 的寫法也能置中，但它會讓子元素變成左右排列，版面容易被改變，現在已經不建議這樣寫。

常見問題

加了沒有效果？

先確認區塊有高度。區塊高度剛好等於內容時，上下置中也看不出差別，要給 height 或 min-height。

可以用在按鈕、卡片這些小元件嗎？

可以。只要是區塊元素（div、section、li，或設成 display: block 的元素）都能用。行內元素（例如 span）要先改成 display: block 或 inline-block。

跟 align-items 有什麼不一樣？

align-items 只在 flex 或 grid 裡有作用，控制的是每一個子元素；align-content 控制的是整組內容，在一般區塊和 grid 裡都能用（在 flex 裡則要搭配換行 flex-wrap: wrap 才有作用，這也是舊寫法要加 flex-wrap 的原因）。要置中一個區塊裡的「整組內容」，用 align-content 最直覺。

延伸閱讀

• CSS div 置中完整整理：水平置中、垂直置中的 6 種寫法
• RWD 響應式網頁怎麼做？viewport 語法與 CSS 基本寫法完整教學

這類新語法能讓網站程式更精簡、更好維護。想把舊網站整理成乾淨、好改的版本，可以參考正威網路行銷的基隆網頁設計服務，我們也服務台北與全台客戶。