前端祕籍,看程式設計師如何用九個招式,搞定css水平居中

Mr.Lin不想說話發表於2018-05-11

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

前端祕籍,看程式設計師如何用九個招式,搞定css水平居中

工具/原料

CSS text-align:center

方法/步驟

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

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

前端祕籍,看程式設計師如何用九個招式,搞定css水平居中

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

隨著越來越多相容flexbox,所以通過“display:flex”實現CSS水平居中的方案也越來越受青睞。

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

這個跟CSS垂直居中的原理是一樣的,只是在flex-direction上有所差別,一個是row(預設值),另外一個是column。

前端祕籍,看程式設計師如何用九個招式,搞定css水平居中

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

對於父元素和子元素的寬度都確定的情況,適合通過display:table-cell和margin-left實現CSS水平居中。

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

前端祕籍,看程式設計師如何用九個招式,搞定css水平居中

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

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

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

前端祕籍,看程式設計師如何用九個招式,搞定css水平居中

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

這種方法可以確保子元素寬度不確定的情況下,也能實現CSS水平居中。

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

前端祕籍,看程式設計師如何用九個招式,搞定css水平居中
做為一名前端程式設計師,有一個學習的氛圍跟一個交流圈子特別重要。這是我的一個前端學習交流群 330336289(邀請碼:寂靜),想學習交流前端,打算深入瞭解這個行業的朋友,不管你是小白還是大牛都歡迎加入,大家一起交流學習。

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

display:inline-block能改父元素內的子元素的表達樣式,同樣需要配合“margin: 0 auto; text-align: center”使用。

前端祕籍,看程式設計師如何用九個招式,搞定css水平居中

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

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

前端祕籍,看程式設計師如何用九個招式,搞定css水平居中

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

我們可以通過增加一個隱藏節點,然後使其float:left,這樣子元素就會被隱藏節點推著水平居中。

這種增加隱藏節點方法也適用於CSS垂直居中,原理一樣,但是不用float。

前端祕籍,看程式設計師如何用九個招式,搞定css水平居中

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

這種方法是最不推薦的方法,因為transform屬性在各個瀏覽器中的表現行為不一致,所以會出現一些相容性的問題,只有當已知使用者瀏覽器時才推薦使用。

前端祕籍,看程式設計師如何用九個招式,搞定css水平居中

注意事項

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

相關文章