CSS垂直居中

方法1:table-cell

.box1{
    display: table-cell;
    vertical-align: middle;
    text-align: center;       
}
 
<div class="box box1">
        <span>垂直居中</span>
</div>

   CSS垂直居中

方法2:display:flex

.box2{

    display: flex;
    justify-content:center; //横
    align-items:Center;  //竖
}

 方法3:定位

.eleTag{
 
/*设置元素绝对定位*/
position:absolute;
top 50%; 
left: 50%;
/*css3 transform 实现*/
transform: translate(-50%, -50%);

}

相关推荐