點(diǎn)擊上方藍(lán)字關(guān)注“小鄭搞碼事”，每天都能學(xué)到知識，搞懂一個(gè)問題！
上篇已經(jīng)提到過，前端布局是整個(gè)web開發(fā)非常重要的一環(huán)，也是最基礎(chǔ)和最前面的一個(gè)環(huán)節(jié) 。有關(guān)居中布局又分垂直和水平方向 。接著上一篇，今天搞一些水平居中的CSS寫法 。
一、inline-block和text-align很簡單，就是將子元素設(shè)置成行內(nèi)塊級元素，這樣就成變來處理行內(nèi)塊級元素水平居中的問題 。
將子元素使用inline-block變成行內(nèi)塊級元素，對父框設(shè)置text-align就能完整 。如下代碼所示：
看起來是下面這樣的：
這個(gè)方法的好處是：兼容性好，甚至可以兼容ie6 ， ie7 。
不好的地方是：當(dāng)給父元素設(shè)置成text-align:center后，其子元素里的文字也會水平居中，這個(gè)可以通過設(shè)置子元素的text-align來處理 。
二、table和margin原理就是將子元素設(shè)置為塊級表格形式，然后在處理這種子元素為表格形式的元素的水平居中問題 ， 用個(gè)margin：0 auto來處理就行 。如下面這段碼所示：
效果起來就是這樣的：
這個(gè)方法的好處的是只要我們設(shè)置child就行，ie8之上都支持 。
應(yīng)該注意的地方是不支持ie低版（可以忽略）
三、absolute和transform和上一篇垂直居中是一樣的，父元素先設(shè)置成相對定位 ， 然后處理子元素在絕對定位下的left值 。原理是一樣的 。這里直接看一下我寫的DEMO的代碼如下所示：
這個(gè)方法的好處就是：居中元素不會對其他的產(chǎn)生影響 。
應(yīng)該注意的地方就是：css3屬性的兼容問題 。
效果看起來和上面一致：
四、flex和margin通過將父元素設(shè)置成flex后，將所有子元素轉(zhuǎn)換成flex item，在將子元素設(shè)置margin屬性達(dá)到居中 。
【表格文字水平居中怎么設(shè)置 表格文字水平居中】這個(gè)方法不好的地方同樣是低版瀏覽器兼容性問題 ， 需要注意一下 。
效果展示一下:
接下來說一下第五種方法 。
五、flex和justify-content這個(gè)方法和上面第四個(gè)方法極其相似，只是這兩個(gè)屬性都是設(shè)置在父元素上 ， 代碼如下：
通過CSS3中的布局利器flex中的justify-content屬性來達(dá)到水平居中 。
比第四個(gè)方法相比，好處是只要設(shè)置父元素屬性就行 。缺點(diǎn)同樣是低版本兼容性問題 。
最后總結(jié)一下：
搞定水平居中一共寫了五種方法 ， 各有異同，理解一下，很容易記住 ， 學(xué)會，常用、常用 。
推薦閱讀
- 表格保存不了怎么辦，表格保存不了怎么辦走兼容
- excel表格如何添加下拉菜單？
- 朋友圈文字怎么設(shè)私密，微信朋友圈設(shè)成私密文字
- 手機(jī)怎么填寫docx 手機(jī)怎么填寫docx表格
- AI軟件怎么制作立體文字
- 美篇段落開頭文字怎么空格 美篇段落開頭文字怎么空格的
- 汽車油量表格的ef是什么意思啊 汽車油量表格的ef是什么意思
- excel工具欄被隱藏 excel表格工具欄隱藏了怎么調(diào)出來
- word表格如何計(jì)算 word表格如何計(jì)算合計(jì)
- 微信語音怎么轉(zhuǎn)文字 微信語音怎么轉(zhuǎn)換成文字顯示