點擊上方藍字關注“小鄭搞碼事”，每天都能學到知識，搞懂一個問題！
上篇已經提到過，前端布局是整個web開發非常重要的一環，也是最基礎和最前面的一個環節。有關居中布局又分垂直和水平方向。接著上一篇，今天搞一些水平居中的CSS寫法。
一、inline-block和text-align很簡單，就是將子元素設置成行內塊級元素，這樣就成變來處理行內塊級元素水平居中的問題。
將子元素使用inline-block變成行內塊級元素，對父框設置text-align就能完整。如下代碼所示：
看起來是下面這樣的：
這個***的好處是：兼容性好，甚至可以兼容ie6，ie7。
不好的地方是：當給父元素設置成text-align:center后，其子元素里的文字也會水平居中，這個可以通過設置子元素的text-align來處理。
二、table和margin原理就是將子元素設置為塊級表格形式，然后在處理這種子元素為表格形式的元素的水平居中問題，用個margin：0auto來處理就行。如下面這段碼所示：
效果起來就是這樣的：
這個***的好處的是只要我們設置child就行，ie8之上都支持。
應該注意的地方是不支持ie低版（可以忽略）
三、absolute和transform和上一篇垂直居中是一樣的，父元素先設置成相對定位，然后處理子元素在絕對定位下的left值。原理是一樣的。這里直接看一下我寫的DEMO的代碼如下所示：
這個***的好處就是：居中元素不會對其他的產生影響。
應該注意的地方就是：css3屬性的兼容問題。
效果看起來和上面一致：
四、flex和margin通過將父元素設置成flex后，將所有子元素轉換成flexitem，在將子元素設置margin屬性達到居中。
這個***不好的地方同樣是低版瀏覽器兼容性問題，需要注意一下。
效果展示一下:
接下來說一下第五種***。
五、flex和justify-content這個***和上面第四個***極其相似，只是這兩個屬性都是設置在父元素上，代碼如下：
通過CSS3中的布局利器flex中的justify-content屬性來達到水平居中。
比第四個***相比，好處是只要設置父元素屬性就行。缺點同樣是低版本兼容性問題。
最后總結一下：
搞定水平居中一共寫了五種***，各有異同，理解一下，很容易記住，學會，常用、常用。
