html,將元素水平,垂直居中的四種方式

2022-07-30 10:21:07 字數 997 閱讀 5835

將元素垂直,水平居中分兩種情況:乙個是元素尺寸固定,二是元素尺寸不固定

一.尺寸固定

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