css实现垂直水平居中的方法

html结构：

<div class="box">
     <div>垂直居中</div>
</div>

方法1：display:flex

.box{

    display: flex;

    justify-content:center;

    align-items:Center;

}

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

.box{position:relative;}
.box div{

            position: absolute;

            width:100px;

            height: 50px;

            top:50%;

            left:50%;

            margin-left:-50px;

            margin-top:-25px;

            text-align: center;

        }

方法3：translate

.box childdiv{

            position: absolute;

            top:50%;

            left:50%;

            width:100%;

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

            text-align: center;

        }

方法4：table-cell

.box{

    display: table-cell;

    vertical-align: middle;

    text-align: center;        

}

方法5：偏移量0+margin:auto

父元素设置相对或绝对定位；要居中的子元素设置绝对定位，所有偏移量为0，外边距为auto：

.wrap{

  positon:relative;
}
.center{

  positon:absolute;

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

  margin:auto;
}

 

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

扫码关注我们

微信号：SRE实战

拒绝背锅 运筹帷幄