实现一个元素的水平垂直居中; 要求: 要求对行内元素、块状元素及不定宽高的块状元素均可适用; 本文完整源代码地址:https://gitee.com/duanweidong/interview-question-code.git
html结构
<div class="container">
<div class="item" style="width: 100px; height: 100px; background: #999;">
块状元素
</div>
</div>
<div class="container">
<div class="item">不定高宽的块状元素</div>
</div>
<div class="container">
<span class="item">行内元素</span>
</div>
定位+transform
<style>
.container {
position: relative;
height: 20rem;
background: #ccc;
margin: 1rem;
}
.item {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
flex布局
.container {
display: flex;
justify-content: center;
align-items: center;
height: 20rem;
background: #ccc;
margin: 1rem;
}
.item {
background: pink;
}
grid布局
.container {
display: grid;
place-items: center;
height: 20rem;
background: #ccc;
margin: 1rem;
}
.item {
background: pink;
}