前端祕籍，看程序員如何用九個招式，搞定css水平居中

CSS水平居中 text-align:center是前端工程師的基本功，我在項目中常常遇到CSS水平居中的需求，這篇教程將我以往用過的9種CSS實現水平居中的方法總結出來，也方便往後再用到時回顧。

工具/原料

CSS
text-align:center

方法/步驟

1.經過margin: 0 auto; text-align: center實現CSS水平居中。

這種方法是實現CSS水平居中最最經常使用的，我在前端開發中大概有60%的CSS水平居中就是經過「margin: 0 auto; text-align: center」實現的。

​

2.經過display:flex實現CSS水平居中。

隨着愈來愈多兼容flexbox，因此經過「display:flex」實現CSS水平居中的方案也愈來愈受青睞。

經過display:flex實現CSS水平居中的原理是父元素display:flex;flex-direction:column;而子元素align-self:center;

這個跟CSS垂直居中的原理是同樣的，只是在flex-direction上有所差異，一個是row(默認值)，另一個是column。

​

3.經過display:table-cell和margin-left實現CSS水平居中。

對於父元素和子元素的寬度都肯定的狀況，適合經過display:table-cell和margin-left實現CSS水平居中。

使用時，父元素display:table-cell，子元素給剩餘寬度一半的margin-left。

​

4.經過position:absolute實現CSS水平居中。

這種方法跟上一個方法適用場景同樣，也是適用於父元素和子元素的寬度都肯定的狀況。

使用時，父元素position:absolute，子元素給剩餘寬度一半的margin-left。

作爲一名前端程序員，有一個學習的氛圍跟一個交流圈子特別重要。這是個人一個前端學習交流羣 330336289（邀請碼：寂靜），想學習交流前端，打算深刻了解這個行業的朋友，無論你是小白仍是大牛都歡迎加入，你們一塊兒交流學習。

5.經過width:fit-content實現CSS水平居中。

這種方法能夠確保子元素寬度不肯定的狀況下，也能實現CSS水平居中。

須要注意的是，須要配合「margin: 0 auto; text-align: center」使用。

​

6.經過display:inline-block和text-align:center實現CSS水平居中。

display:inline-block能改父元素內的子元素的表達樣式，一樣須要配合「margin: 0 auto; text-align: center」使用。

7.經過position:relative、float:left和margin-left實現CSS水平居中。

給父元素樣式position:relative，給子元素float:left和margin-left就能夠實現CSS水平居中。

8.經過隱藏節點+float的方法實現CSS水平居中。

咱們能夠經過增長一個隱藏節點，而後使其float:left，這樣子元素就會被隱藏節點推着水平居中。

這種增長隱藏節點方法也適用於CSS垂直居中，原理同樣，可是不用float。

9.經過transform實現CSS水平居中。

這種方法是最不推薦的方法，由於transform屬性在各個瀏覽器中的表現行爲不一致，因此會出現一些兼容性的問題，只有當已知用戶瀏覽器時才推薦使用。

​

注意事項

CSS水平居中的第一、三、4種方法的瀏覽器兼容性最好，其它方法或多或少都存在一些瀏覽器兼容性上的不足