面试很多次,这个题目是不是回回出现被问到
今天就在此总结一下实现盒子垂直居中的方法!
一般我们可以从两方面进行切入总结
1.已知盒子的宽高
2.未知盒子的宽高
首先我先来说一下已知盒子宽高的方法:
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
①flex布局 (包含两种)
无论已知未知宽高,都可以使用,如果不考虑兼容性的话,flex布局应用应该是相当广泛的
/*1.flex + justify-content + align-items*/
.parent {
width: 500px;
height: 500px;
background-color: rgb(199, 223, 243);
display: flex;
justify-content: center;
align-items: center;
}
.child {
height: 200px;
width: 200px;
background-color: rgb(224, 246, 186);
}
/*2.flex + margin*/
.parent {
width: 500px;
height: 500px;
background-color: rgb(199, 223, 243);
display: flex;
}
.child {
height: 200px;
width: 200px;
background-color: rgb(224, 246, 186);
margin: auto;
}
②使用绝对定位absolute + 负值margin
.parent {
position: relative;
width: 500px;
height: 500px;
background-color: rgb(199, 223, 243);
}
.child {
position: absolute;
height: 200px;
width: 200px;
background-color: rgb(224, 246, 186);
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
实现效果
③使用绝对定位absolute + margin:auto
.parent {
position: relative;
width: 500px;
height: 500px;
background-color: rgb(199, 223, 243);
}
.child {
position: absolute;
height: 200px;
width: 200px;
background-color: rgb(224, 246, 186);
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
④使用绝对定位absolute + 计算函数calc
.parent {
position: relative;
width: 500px;
height: 500px;
background-color: rgb(199, 223, 243);
}
.child {
height: 200px;
width: 200px;
background-color: rgb(224, 246, 186);
position: absolute;
top: calc(50% - 100px);
left: calc(50% - 100px);
}
再来说一下未知盒子宽高的方法:
⑤ 使用绝对定位absolute + transform
.parent {
position: relative;
width: 500px;
height: 500px;
background-color: rgb(199, 223, 243);
}
.child {
height: 200px;
width: 200px;
background-color: rgb(224, 246, 186);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
⑥使用text-align + vertical-align
前提是将该元素设置为行内元素,然后通过给父元素设置text-align:center实现水平居中,给子元素设置vertical-align:middle实现垂直居中
.parent {
width: 500px;
height: 500px;
background-color: rgb(199, 223, 243);
line-height: 500px;
text-align: center;
}
.child {
height: 200px;
width: 200px;
background-color: rgb(224, 246, 186);
display: inline-block;
vertical-align: middle;
}
⑦使用grid网格布局
有这种方法,但是目前在开发中应用并不是很广泛,不是不好用,而是兼容性目前不是很理想,实现起来与flex布局类似
.parent {
width: 500px;
height: 500px;
background-color: rgb(199, 223, 243);
display: grid;
justify-content: center;
align-items: center;
}
.child {
height: 200px;
width: 200px;
background-color: rgb(224, 246, 186);
}
⑧ 使用table表格元素
使用表格元素实现垂直居中,目前我在开发过程中用的确实不多,也不推荐使用