HTML 元素水平垂直居中

2021-10-24 13:19:37 字數 724 閱讀 7860

方案一:

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...