圖片.png

圖片.png

1,父容器設(shè)置padding:20px 0;

需求：父容器高度自適應(yīng)，設(shè)置內(nèi)div垂直居中
實(shí)現(xiàn)：設(shè)置內(nèi)div的padding上下等距

圖片.png

圖片.png

（2）父容器和子div

圖片.png

2,絕對定位

需求：父容器定高（或自適應(yīng)），內(nèi)div寬高自適應(yīng)，實(shí)現(xiàn)內(nèi)div垂直居中

1）設(shè)置負(fù)margin,兼容所有瀏覽器，但不響應(yīng)（只改變dialog的寬高，達(dá)不到居中效果）

圖片.png

圖片.png

2）使用css3的transform:translate(-50%,-50%),不兼容所有瀏覽器，但響應(yīng)

圖片.png

圖片.png

圖片.png

3，margin:auto 設(shè)置水平垂直都居中

4，添加一個輔助div,設(shè)置基準(zhǔn)線對齊方式 vertical-align

vertical-align可對行內(nèi)元素和表格元素設(shè)置垂直對齊方式

行內(nèi)元素

圖片.png

圖片.png

圖片.png

5，關(guān)于table

（1）純table實(shí)現(xiàn)，html-table 利用table-tr-td中table自帶的垂直居中

需求：table定高，不使用vertical-align,使里面的div（寬高自適應(yīng)）垂直居中

圖片.png

（2）div模擬table，表格元素（div-display:table/table-row/table-cell）

1）div>img 使img垂直居中

需求：包裹層定高，img實(shí)現(xiàn)垂直居中
實(shí)現(xiàn)思路：
1）包裹層設(shè)置display:table-cell
2）包裹層設(shè)置vertical-align:middle

圖片.png

圖片.png

2）div>div

需求：div里面包裹著一個div（contain）,包裹層定高，contain寬高自適應(yīng)，使contain垂直居中與包裹層
實(shí)現(xiàn)主要點(diǎn)：
1）div父包裹層模擬 table-cell(列)
2）列定高
3）vertical-align:middle

圖片.png

5，試出來的方法：margin:auto;

需求：父容器定高，子容器定高定寬，實(shí)現(xiàn)自容器水平垂直居中
實(shí)現(xiàn)要點(diǎn)：
（1）父容器（position:relative）,子容器（position:absolute）
（2）父容器定高，子容器定高定寬
（3）子容器設(shè)置top,bottom,right,left都為0
（4）子容器設(shè)置 margin水平垂直都為auto

圖片.png