方案一:
div絕對定位水平垂直居中【margin:auto實現絕對定位元素的居中】,
相容性:,ie7及之前版本不支援
div方案二:
div絕對定位水平垂直居中【margin 負間距】 這或許是當前最流行的使用方法。
div方案三:
div絕對定位水平垂直居中【transforms 變形】
相容性:ie8不支援;
div方案四:
css不定寬高水平垂直居中
.box
.box>div
方案五:
將父盒子設定為table-cell元素,可以使用text-align:center和vertical-align:middle實現水平、垂直居中。比較完美的解決方案是利用三層結構模擬父子結構
tablecell
/*table-cell實現居中
將父盒子設定為table-cell元素,設定
text-align:center,vertical-align: middle;
子盒子設定為inline-block元素
*/.tablecell
.tablecell .ok
.tablecell .innerbox
方案六:
對子盒子實現絕對定位,利用calc計算位置
calc
/絕對定位,clac計算位置/
.calc
.calc .innerbox
元素水平垂直居中
lang en charset utf 8 垂直居中示例title name viewport content width device width,initial scale 1 rel stylesheet href 可行,支援ie8 block1 block1 before center1 不...
元素水平垂直居中
給子元素設定以下內容 給父元素新增屬性 display flex align items center justify content center 先給元素設定絕對定位,再依次新增以下屬性,具體 如下所示。position absolute top 0 left 0 right 0 bottom ...
元素水平垂直居中
只可用於定寬高元素 doctype html html lang en head meta charset utf 8 title 垂直居中 title style type text css body parent container style head body div id parent d...