點擊上方藍字關注“小鄭搞碼事”，每天都能學到知識，搞懂一個問題！
上篇已經提到過，前端布局是整個web開發非常重要的一環，也是最基礎和最前面的一個環節。有關居中布局又分垂直和水平方向。接着上一篇，今天搞一些水平居中的CSS寫法。
一、inline-block和text-align很簡單，就是将子元素設置成行内塊級元素，這樣就成變來處理行内塊級元素水平居中的問題。
将子元素使用inline-block變成行内塊級元素，對父框設置text-align就能完整。如下代碼所示：
看起來是下面這樣的：
效果起來就是這樣的：
這個方法的好處的是隻要我們設置child就行，ie8之上都支持。
應該注意的地方是不支持ie低版（可以忽略）
三、absolute和transform和上一篇垂直居中是一樣的，父元素先設置成相對定位，然後處理子元素在絕對定位下的left值。原理是一樣的。這裡直接看一下我寫的DEMO的代碼如下所示：
這個方法的好處就是：居中元素不會對其他的産生影響。
應該注意的地方就是：css3屬性的兼容問題。
效果看起來和上面一緻：
四、flex和margin
通過将父元素設置成flex後，将所有子元素轉換成flex item，在将子元素設置margin屬性達到居中。
這個方法不好的地方同樣是低版浏覽器兼容性問題，需要注意一下。
效果展示一下:
接下來說一下第五種方法。
五、flex和justify-content這個方法和上面第四個方法極其相似，隻是這兩個屬性都是設置在父元素上，代碼如下：
通過CSS3中的布局利器flex中的justify-content屬性來達到水平居中。
比第四個方法相比，好處是隻要設置父元素屬性就行。缺點同樣是低版本兼容性問題。
最後總結一下：
搞定水平居中一共寫了五種方法，各有異同，理解一下，很容易記住，學會，常用、常用。
,更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
