【前端技巧】用 CSS 一行實現元素水平居中：margin: 0 auto

| Web Design | 2 Reads

Copyright Notice: This article is an original work licensed under the CC 4.0 BY-NC-ND license. If you wish to repost this article, please include the original source link and this copyright notice.
Source link: https://v2know.com/article/1137

在前端開發中，「讓一個元素在水平方向上居中」是一個常見需求。雖然現在有很多新方法（如 Flexbox、Grid），但最經典、兼容性最好的方式就是這一招：

margin: 0 auto;
display: block;

為什麼這樣能居中？

margin: 0 auto; 是讓元素的左右外邊距自動分配，從而居中。

不過這招只對塊級元素（block）或被顯式設為 display: block 或 inline-block 的元素生效。

所以通常你需要這樣寫：

width: 100px;
margin: 0 auto;
display: block;

這段意思是：

  • 元素寬度固定為 100px；

  • 上下邊距為 0；

  • 左右邊距自動，瀏覽器就會平均分配左右空間；

  • display: block 保證這是一個可以獨佔一行的塊元素，從而啟用自動邊距居中效果。

範例：讓圖片居中

HTML：

<img src="logo.png" alt="Logo" style="width: 100px; margin: 0 auto; display: block;">

這段代碼會讓圖片在容器中水平居中顯示。

⚠️ 常見錯誤：用了 float

像這樣的 CSS：

float: right;

會導致元素脫離文流，這樣再設什麼 margin: auto 是無效的。

所以要居中，請記得去掉 float！

適用場景

  • 固定寬度的按鈕或圖片居中

  • 表單中的輸入框居中顯示

  • 小區塊內容居中

如果元素是彈性寬度或者想要更強大的布局，可以考慮使用 Flexbox。

小結

方法 簡單程度 兼容性 是否需要父容器參與
margin: 0 auto; ★★★★★ ★★★★★ ❌
flex + justify-content: center ★★★★☆ ★★★★☆ ✅

如果你追求簡單可靠、兼容老舊瀏覽器，margin: 0 auto 絕對是首選！

This article was last edited at