垂直居中的几种优雅实现方式
<div class="wp">
<div class="box">我是小三</div>
</div>一、定宽高
先定义页面结构和基础的css
.wrapper {
border: 1px solid red;
width: 300px;
height: 300px;
}
.box {
background: green;
width: 100px;
height: 100px;
}
1.absolute + 负margin
先将box的左上角对准外面div的正中心，这时候再往左上角偏移box的一半就可以达到垂直居中的效果
.wp {
position: relative;
}
.box {
position: absolute;;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
2.absolute + margin
.wrapper {
position: relative;
}
.box {
position: absolute;;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}3.absoulte + calc
.wrapper {
position: relative;
}
.box {
position: absolute;;
top: calc(50% - 50px);
left: calc(50% - 50px);
}
二、居中元素不定宽高适用
1、absolute + transform
.wrapper {
position: relative;
}
.box {
position: absolute;;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
2、flex
.wrapper {
display: flex;
justify-content: center;
align-items: center;
}作者：费德
最新文章
全部分类