設計是帶有主觀色彩的，同樣網頁設計中的 css 一樣讓人摸不頭腦。網上列舉的實現方式一大把，或許在這裡你都看到過，但既然來到這裡我希望這篇能讓你看有所收獲，畢竟這也是前端面試的基礎。

1、text-align 方式

text-align 是入門最常用的屬性，根據字面意思是文本對齊用的。

隻需在父級标簽上設置即可，雖然内部的子元素不管是塊級元素 or 非塊級元素都可以使用，但需注意塊級元素會占用整行的寬度，文本是在這個寬度中作水平居中。

代碼舉例

頁面效果

2、定寬 margin auto 方式

這也是常見的水平居中方式，通過設置子元素的 margin 屬性來控制距離父元素的距離。需要注意：子元素如果是塊級元素，就最好設置寬度，不然就會占滿于父元素，在通過 text-align 文本居中對齊就沒有意義了。對于非塊級元素必須要設置寬度。

代碼舉例

頁面效果

3、flex 方式

通過設置浮動布局來實現居中，這是相對上兩種方法某種程度上最簡單的實現，因為在其基礎上可以做更多布局的擴展，不用擔心破壞布局。

如果你不了解 flex 布局，可以看下這個鍊接：

https://eminoda.github.io/2018/08/20/css-flex/

設置 justify-content 輕松搞定定位：

代碼舉例

頁面效果

4、position 浮動 方式

現在這兩種是比較有趣的定位方式，實際場景不建議使用，我是不願意别人這樣寫，腦袋還要轉個彎，來理解這樣布局的計算方式。

如果元素是塊級元素，通過 float 浮動屬性，将它的寬度“抹去”。然後通過對于上級元素的相對定位通過錯位修正的方式來居中。

讓父元素的左側從中間開始定位，子元素再根據自己的實際寬度往左偏移一半達到水平居中的目的。

代碼舉例

頁面效果

5、position transform 方式

思路同上，不同的是這次設置子元素為絕對定位，并距離左側偏離一半，最後通過 transform 根據元素的實際寬度往左再偏移一半，達到居中效果。

代碼舉例

頁面效果

總結

上面隻列舉了 5 種水平居中的實現方法，相信還要更多的方式。不過不管哪種方法，能在業務代碼實踐中最快速、最準确的運用才是最佳實踐。

希望在讀的各位能有所收獲。

關于我

一名工作在一線的前端工程師，樂于實踐，并分享前端開發經驗。

關注【前端雨爸】，歡迎評論留言，願與各位交流進步。

點擊 ↙ 了解更多，了解更多前端開發技術文章。！

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部