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