css/css3 未知元素宽高，垂直居中和水平居中

未知元素的宽高情况下  垂直居中和水平居中

第一种 flex盒布局 （推荐）

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

/*主轴居中对齐*/

/*侧轴居中对齐*/

.ele{
display:flex;
justify-content: center;
align-items: center;
} 

 

第二种 css3的transform

.ele{
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

 

第三种 display的table-cell  表格单元格

.box{
    display:table-cell;
    text-align:center; 
    vertical-align:middle;     
} 

 

 

 

 

.

扫码关注我们

微信号：SRE实战

拒绝背锅 运筹帷幄