一、CSS左右布局：
-
結(jié)果如下圖（flex）：
兩欄 -
代碼如下：
兩欄代碼
二顶猜、CSS左中右布局：
-
結(jié)果如下圖（flex）：
三欄.png -
代碼如下：
三欄代碼
三渺鹦、水平居中：
-
使用margin: 0 auto實現(xiàn)代碼：
margin-0-auto -
使用 flex屬性justify-content: center實現(xiàn)代碼：
flex -
使用display: inline-block元素的屬性text-align: center實現(xiàn)代碼：
text-align.png
上面代碼實現(xiàn)效果：
水平居中
四、垂直居中：
-
使用table標簽自帶屬性實現(xiàn)代碼：
垂直居中
運行效果 -
使用偽元素before偎痛、after實現(xiàn)代碼：
偽元素實現(xiàn)
運行效果 -
使用 flex屬性align-items: center實現(xiàn)代碼：
flex
運行效果 -
使用 相對定位加負margin實現(xiàn)代碼：
負margin1
運行效果 -
使用 相對定位加負margin：auto實現(xiàn)代碼：
margin：auto
運行效果 -
使用 相對定位加 transform: translate實現(xiàn)代碼：
translate
運行效果
聲明：本博客教程版權(quán)歸蘭文聰和饑人谷所有，轉(zhuǎn)載需說明來源构捡！
