水平居中和垂直居中在寫靜態(tài)頁面時常用的css樣式续捂，下面總結(jié)一下關(guān)于水平和垂直居中钞馁，希望對給位朋友有所幫助锨络。（如有遺漏不足請發(fā)留言補(bǔ)充謝謝~）
1. 塊元素的水平居中：在有固定寬度時加上margin{0 auto;}
QQ截圖20161128153756.jpg
2. 文本居中：把text-algin：center;屬性加在塊元素上闺金，使其內(nèi)文本居中。
QQ截圖20161128154326.jpg
demo
3.塊元素垂直居中：
(1)使用定位
QQ截圖20161128155918.jpg
demo
(2)使用上下margin(作用在子元素)或padding（作用在父元素）
QQ截圖20161128160550.jpg
demo
QQ截圖20161128163050.jpg
4. 文本垂直居中：
(1)使用line-height:另行高line-height等于外層容器高度height
QQ截圖20161128163904.jpg
demo
(2)設(shè)置上下padding（作用在子元素）
QQ截圖20161128164620.jpg
[demo](http://js.jirengu.com/kute/1/edit?html,output）
5. 利用定位做蒙版 讓蒙版水平垂直居中烘贴。
QQ截圖20161128172129.jpg
6. 圖像垂直水平居中
(1)用display:table-cell;
QQ截圖20161128180052.jpg
demo
(2)在內(nèi)層容器內(nèi)加一個空元素禁添；
QQ截圖20161128180517.jpg
demo
文章有所不足支出希望朋友指出 謝謝~~
版權(quán)歸饑人谷_楠柒所有如有轉(zhuǎn)載請注明出處~~
