关于如何让div垂直居中这个问题,是初级前端面试被问到的较为基础以及很常见的一道题目,下面我将总结一下让div垂直居中的击中方法。
<body>
<div class="wrap">
<div class="box">123</div>
</div>
</body>
1.margin:0 auto; (效果为水平居中)
{
width: 100px;
height: 100px;
border: 1px solid #000000;
margin:0 auto;
}
2.绝对定位,上左为50%,再让上左外边距为: -(实际宽高/2)
.box {
width: 100px;
height: 100px;
border: 1px solid #000000;
position: absolute;
left: 50%;
top: 50%;
margin-top: -50px;
margin-left: -50px;
}
3.绝对定位,上下左右为0,margin为auto(记得后面这一句话很重要!)
.box {
width: 100px;
height: 100px;
border: 1px solid #000000;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
4.弹性盒子 (这种方法在知不知道宽高都能够实现,只不过父元素不知道宽高的情况下它会是水平居中,但是需要注意的一个点是:把属性写在要求居中的div的父元素中)
.wrap{
width: 500px;
height: 500px;
border: 1px solid #000000;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.box{
}
5.平移法 (这种方法在知不知道宽高都能够实现,在知道本身div的宽高下它会垂直水平居中,否则是水平居中)
.box {
width: 100px;
height: 100px;
border: 1px solid #000000;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
6.利用css3新增属性 display: table; display: table-cell,vertical-aligen: middel
.wrap {
height: 500px;
border: 1px solid #000000;
display: table;
}
.box {
border: 1px solid #000000;
background: pink;
display: table-cell;
vertical-align: middle;
}
上面的4,5,,6方法都可以
目前见到的比较常用的就是这几种方法,还知道方法的童鞋可以在下面留言或者私聊我,哈哈哈欢迎一起讨论学习。