將元素垂直,水平居中分兩種情況:乙個是元素尺寸固定,二是元素尺寸不固定
一.尺寸固定
方法1:定位 ,50%,margin負距
方法2:四方為都為0 ,margin:auto
3 方法三,元素尺寸不固定
4.方法四:使用偽元素 利用inline-block與vertical-align配合偽元素達到垂直居中
/* 背景左右居中 */
.dialog_container
/* 偽元素上下居中 */
.dialog_container:after
/* 真正居中的元素 */
.dialog_box
補充:將元素水平居中比較簡單
1.塊級元素居中 margin 和width配合
2.內聯元素居中 給其父級元素加text-align:center
HTML 元素水平垂直居中
方案一 div絕對定位水平垂直居中 margin auto實現絕對定位元素的居中 相容性 ie7及之前版本不支援 div方案二 div絕對定位水平垂直居中 margin 負間距 這或許是當前最流行的使用方法。div方案三 div絕對定位水平垂直居中 transforms 變形 相容性 ie8不支援 ...
元素水平垂直居中
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 ...