前端秘籍，看程序員如何用九個(gè)招式，搞定css水平居中

CSS水平居中 text-align:center是前端工程師的基本功，我在項(xiàng)目中經(jīng)常遇到CSS水平居中的需求，這篇教程將我以往用過的9種CSS實(shí)現(xiàn)水平居中的方法總結(jié)出來，也方便日后再用到時(shí)回顧。

工具/原料

CSS
text-align:center

方法/步驟

1.通過margin: 0 auto; text-align: center實(shí)現(xiàn)CSS水平居中。

這種方法是實(shí)現(xiàn)CSS水平居中最最常用的，我在前端開發(fā)中大概有60%的CSS水平居中就是通過“margin: 0 auto; text-align: center”實(shí)現(xiàn)的。

?

2.通過display:flex實(shí)現(xiàn)CSS水平居中。

隨著越來越多兼容flexbox，所以通過“display:flex”實(shí)現(xiàn)CSS水平居中的方案也越來越受青睞。

通過display:flex實(shí)現(xiàn)CSS水平居中的原理是父元素display:flex;flex-direction:column;而子元素align-self:center;

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

?

3.通過display:table-cell和margin-left實(shí)現(xiàn)CSS水平居中。

對(duì)于父元素和子元素的寬度都確定的情況，適合通過display:table-cell和margin-left實(shí)現(xiàn)CSS水平居中。

使用時(shí)，父元素display:table-cell，子元素給剩余寬度一半的margin-left。

?

4.通過position:absolute實(shí)現(xiàn)CSS水平居中。

這種方法跟上一個(gè)方法適用場景一樣，也是適用于父元素和子元素的寬度都確定的情況。

使用時(shí)，父元素position:absolute，子元素給剩余寬度一半的margin-left。

做為一名前端程序員，有一個(gè)學(xué)習(xí)的氛圍跟一個(gè)交流圈子特別重要。這是我的一個(gè)前端學(xué)習(xí)交流群 330336289（邀請碼：寂靜），想學(xué)習(xí)交流前端，打算深入了解這個(gè)行業(yè)的朋友，不管你是小白還是大牛都?xì)g迎加入，大家一起交流學(xué)習(xí)。

5.通過width:fit-content實(shí)現(xiàn)CSS水平居中。

這種方法可以確保子元素寬度不確定的情況下，也能實(shí)現(xiàn)CSS水平居中。

需要注意的是，需要配合“margin: 0 auto; text-align: center”使用。

?

6.通過display:inline-block和text-align:center實(shí)現(xiàn)CSS水平居中。

display:inline-block能改父元素內(nèi)的子元素的表達(dá)樣式，同樣需要配合“margin: 0 auto; text-align: center”使用。

7.通過position:relative、float:left和margin-left實(shí)現(xiàn)CSS水平居中。

給父元素樣式position:relative，給子元素float:left和margin-left就可以實(shí)現(xiàn)CSS水平居中。

8.通過隱藏節(jié)點(diǎn)+float的方法實(shí)現(xiàn)CSS水平居中。

我們可以通過增加一個(gè)隱藏節(jié)點(diǎn)，然后使其float:left，這樣子元素就會(huì)被隱藏節(jié)點(diǎn)推著水平居中。

這種增加隱藏節(jié)點(diǎn)方法也適用于CSS垂直居中，原理一樣，但是不用float。

9.通過transform實(shí)現(xiàn)CSS水平居中。

這種方法是最不推薦的方法，因?yàn)閠ransform屬性在各個(gè)瀏覽器中的表現(xiàn)行為不一致，所以會(huì)出現(xiàn)一些兼容性的問題，只有當(dāng)已知用戶瀏覽器時(shí)才推薦使用。

?

注意事項(xiàng)

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