CSS div 置中完整整理：水平置中、垂直置中的 6 種寫法

「把這個 div 放到正中間」是網頁設計最常遇到、也最常卡住的需求。CSS 置中的寫法很多，會卡住通常不是語法寫錯，而是沒分清楚兩件事：

1. 要置中的是什麼：一行文字？一張圖片？還是一整個區塊？
2. 要哪個方向：只要左右置中？還是上下也要置中？

下面依照情況整理 6 種寫法，最後有一張「該用哪一種」的快速對照。

方法一：Flexbox，上下左右一起置中（最常用）

把外層設成 flex，裡面的東西就會上下左右都置中：

.parent {
  display: flex;
  justify-content: center; /* 左右置中 */
  align-items: center;     /* 上下置中 */
  min-height: 300px;       /* 外層要有高度,上下置中才看得出來 */
}

<div class="parent">
  <div class="child">我在正中間</div>
</div>

Flexbox 是 CSS3 為了各種螢幕尺寸設計的排版方式，所有瀏覽器都支援，也是 RWD 響應式網頁最常用的排版工具。只要記得：寫在外層，不是寫在要置中的那個元素上。

方法二：Grid，兩行搞定

Grid 的 place-items 同時設定上下和左右，寫法更短：

.parent {
  display: grid;
  place-items: center;
  min-height: 300px;
}

效果跟 Flexbox 幾乎一樣。差別是：外層裡面有好幾個子元素時，Flexbox 預設會排成一橫排，Grid 則會上下疊成一欄。

方法三：align-content，不用 flex 的垂直置中（新寫法）

2024 年起，主流瀏覽器都支援在一般區塊上直接用 align-content 做垂直置中，不用改成 flex 或 grid：

.parent {
  min-height: 300px;
  align-content: center; /* 只負責上下置中 */
  text-align: center;    /* 文字左右置中 */
}

這個寫法的細節與瀏覽器支援，請看網頁設計裡面垂直置中最簡單的方法。

方法四：margin-inline: auto，區塊左右置中

整個網站內容置中在畫面中間（例如最大寬度 1200px 的版心）是最典型的用法。元素要有寬度或最大寬度，左右外距設成 auto：

.container {
  max-width: 1200px;
  margin-inline: auto; /* 等於 margin-left: auto; margin-right: auto; */
}

圖片要左右置中也是同樣道理，但圖片預設是行內元素，要先改成區塊：

img.center {
  display: block;
  margin-inline: auto;
}

方法五：text-align，文字與行內元素左右置中

只是要讓文字、按鈕、行內圖片左右置中，寫在外層就好：

.title {
  text-align: center;
}

單行文字要上下置中，也可以讓行高等於高度（只適合確定只有一行的情況，例如按鈕）：

.button {
  height: 48px;
  line-height: 48px;
  text-align: center;
}

方法六：絕對定位，疊在圖片或區塊正中間

要把文字或按鈕「疊」在另一個東西的正中間（例如影片封面上的播放鍵），用絕對定位：

.parent {
  position: relative;
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

top: 50% 和 left: 50% 是把元素的左上角移到中間，translate(-50%, -50%) 再往回移動自己一半的寬高，才會真正置中。

該用哪一種？

• 上下左右都要置中：Flexbox 或 Grid
• 只要上下置中，不想改排版方式：align-content
• 整個區塊（版心、圖片）左右置中：margin-inline: auto
• 文字左右置中：text-align: center
• 疊在另一個元素上面：絕對定位 + transform

置中沒效果？常見原因

上下置中沒反應

九成是外層沒有高度。外層高度剛好等於內容時，上下置中也看不出差別。給外層 min-height，或全螢幕置中用 min-height: 100vh。

寫了 margin: auto 還是沒置中

檢查兩件事：元素有沒有寬度（沒有的話它本來就佔滿整行）、是不是行內元素（span、img 預設是行內，要改成 display: block）。

justify-content、align-items 沒反應

這兩個屬性要寫在 display: flex 或 display: grid 的外層，寫在子元素上不會有作用。

Flexbox 裡的文字太長把版面撐開

Flex 的子元素預設不會縮得比內容還窄，加上 min-width: 0 就能讓長文字正常換行或截斷。

延伸閱讀

• CSS 垂直置中最簡單的方法：align-content: center 一行搞定
• CSS 圖片填滿 div 不變形：object-fit: cover 用法與固定比例寫法
• RWD 響應式網頁怎麼做？viewport 語法與 CSS 基本寫法完整教學

版面上的這些細節，在設計階段就規劃好，後面就不用一直修。正威網路行銷是基隆在地的網頁設計工作室，如果你想找人做一個手機電腦都好看的網站，歡迎參考我們的基隆網頁設計服務。