css實(shí)現(xiàn)水平居中的方法

這篇文章主要介紹了css實(shí)現(xiàn)水平居中的方法，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

css的基本語(yǔ)法是什么

css的基本語(yǔ)法是：1、css規(guī)則由選擇器和一條或多條聲明兩個(gè)部分構(gòu)成；2、選擇器通常是需要改變樣式的HTML元素；3、每條聲明由一個(gè)屬性和一個(gè)值組成；4、屬性和屬性值被冒號(hào)分隔開(kāi)。

css實(shí)現(xiàn)水平居中的方法：1、使用margin和text-align屬性；2、通過(guò)“display:flex”；3、通過(guò)“display:table-cell”和margin-left；4、通過(guò)絕對(duì)定位；5、通過(guò)transform屬性。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

css實(shí)現(xiàn)水平居中

1、通過(guò)margin+text-align實(shí)現(xiàn)CSS水平居中。

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

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

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

通過(guò)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、通過(guò)display:table-cell和margin-left實(shí)現(xiàn)CSS水平居中。

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

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

4、通過(guò)絕對(duì)定位實(shí)現(xiàn)CSS水平居中。

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

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

5、通過(guò)transform實(shí)現(xiàn)CSS水平居中。

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

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“css實(shí)現(xiàn)水平居中的方法”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!