【CSS】元素垂直水平居中显示

[1]  使用绝对定位和外边距

fathereElement{
　　position : relative;
}
childElment{
　　margin : auto;
　　position : absolute;
　　top : 0;
　　left : 0;
　　bottom : 0;
　　right : 0;
　　height : 500px;
}

 

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

[2]  在确认子元素的大小时

fathereElement{
　　position : relative;
}
childElment{
　　position : absolute;
　　top : 50%;
　　left : 50%;
　　margin-top : - childElement height;
　　margin-left : - childElement with;
}

　　

[3]  使用transform

fathereElement{
　　position : relative;
}
childElment{
　　position : absolute;
　　top : 50%;
　　left : 50%;
　　transform : translate(-50%,-50%);
}

 

[4]  使用flex

fathereElement{
　　display:flex;
}
childElment{
　　position : absolute;
　　top : 50%;
　　transform : translateY(-50%);
}

　　

[5]  利用table-cell,在父级设置一下属性，子内容垂直居中

display: table-cell;
vertical-align:middle;

　　

扫码关注我们

微信号：SRE实战

拒绝背锅 运筹帷幄