CSS实现水平垂直居中的方式

方法1：table-cell

html结构：

<div class=“box1”>

<span>水平垂直居中</span>

</div>

css代码：

.box1{

display: table-cell;

vertical-align: middle;

text-align: center;

}

方法2：display:flex

html结构：

<div class="box2">

<div>水平垂直居中</div>

</div>

css代码：

.box2{

display: flex;

justify-content:center;

align-items:center;

}

方法3：绝对定位和0

.box3{position:relative}

.box3 div{

position:absolute;

top:0; left:0; right:0;bottom:0;

margin:auto;

}

方法4：绝对定位和负边距

.box4{position:relative}

.box4 div{

width:100px;

height:50px;

position:absolute;

top:50%;

left:50%;

margin:-25px 0 0 -50px;

text-align:center;

}

方法5：绝对定位和translate

.box5{position:relative}

.box5 div{

position:absolute;

top:50%;

left:50%;

transform:translate(-50%,-50%);

text-align:center;

}

方法6：display:flex和margin:auto

.box6{ display: flex; text-align: center; }

.box6 div{ margin: auto; }