如何將乙個div水平垂直居中？6種方法做推薦

方案一：

div絕對定位水平垂直居中【margin:auto實現絕對定位元素的居中】，

相容性：,ie7及之前版本不支援

1

div

方案二：

div絕對定位水平垂直居中【margin 負間距】     這或許是當前最流行的使用方法。

1

div

方案三：

div絕對定位水平垂直居中【transforms 變形】

相容性：ie8不支援；

1

div

方案四：

css不定寬高水平垂直居中

1

.box
9         .box>div

將父盒子設定為table-cell元素，可以使用text-align:center和vertical-align:middle實現水平、垂直居中。比較完美的解決方案是利用三層結構模擬父子結構

1

class="
outerbox tablecell
">
2class="
ok">
3class="
innerbox
">tablecell45
678 /*
9 table-cell實現居中
10 將父盒子設定為table-cell元素，設定
11 text-align:center,vertical-align: middle;
12 子盒子設定為inline-block元素
13 */
14.tablecell
17.tablecell .ok
22.tablecell .innerbox

1

class="
outerbox calc
">
2class="
innerbox
">calc34
56 /*絕對定位，clac計算位置*/
7.calc
10.calc .innerbox

如何將乙個div水平垂直居中

方法一 div絕對定位水平垂直居中 margin auto實現絕對定位元素的居中 相容性 ie7及之前版本不支援 div方法二 div絕對定位水平垂直居中 margin負間距 div方法三 div絕對定位水平垂直居中 transform變形 相容性 ie8不支援 div方法四 css不定寬高水平垂直...

如何將乙個div水平垂直居中

方案一 div絕對定位水平垂直居中 margin auto實現絕對定位元素居中 相容性 ie7之前版本不支援 div 方案二 div絕對定位水平居中 margin負間距 div 方案三 div絕對定位水平垂直居中 transform變形 相容性 ie8不支援 div 方案四 css不定寬高水平垂直居...

如何將乙個div水平垂直居中？6種方法做推薦

方案一 div絕對定位水平垂直居中 margin auto實現絕對定位元素的居中 相容性 ie7及之前版本不支援 1 div 方案二 div絕對定位水平垂直居中 margin 負間距 這或許是當前最流行的使用方法。1 div 方案三 div絕對定位水平垂直居中 transforms 變形 相容性 i...