其实元素垂直居中这个话题已经是老生常谈了,但是希望你能够继续看下去,因为实现垂直居中的方法并不只以两种,下面的方法有可能你之前也并没有了解过,那么开始步入正题!
- 方法一:relative定位+transform方式
.box {
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
复制代码
- 方法二: 利用flex特性,给元素父元素上设置以下属性
.wrapper {
display: -webkit-flex;
justify-content: center;
align-items: center;
}
复制代码
- 方法三:相对于父元素absolue定位
.wrapper {
position: relative
}
.box {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
复制代码