css实现垂直居中（面试的时候面试官经常会问的）

65 阅读 0 评论 43 点赞

我是靠谱客的博主整齐老虎，最近开发中收集的这篇文章主要介绍css实现垂直居中（面试的时候面试官经常会问的），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1.absolute + margin auto

<style>
.wrap {
position: relative;
width: 200px;
height: 200px;
border: 1px solid blueviolet;
}
.children {
margin:auto;
bottom: 0;
right: 0;
left: 0;
top: 0;
position: absolute;
width: 100px;
height: 100px;
background: beige;
}
</style>
<body>
<div class="wrap">
<div class="children">子元素</div>
</div>
</body>

2.absolute + 负margin

<style>
.wrap {
position: relative;
width: 200px;
height: 200px;
border: 1px solid blueviolet;
}
.children {
margin-left: -50px;
margin-top: -50px;
top: 50%;
left: 50%;
position: absolute;
width: 100px;
height: 100px;
background: beige;
}
</style>
<body>
<div class="wrap">
<div class="children">子元素</div>
</div>
</body>

3.absolute + calc

<style>
.wrap {
position: relative;
width: 200px;
height: 200px;
border: 1px solid blueviolet;
}
.children {
top:calc(50% - 50px);
left:calc(50% - 50px);
position: absolute;
width: 100px;
height: 100px;
background: beige;
}
</style>
<body>
<div class="wrap">
<div class="children">子元素</div>
</div>
</body>

4.absolute + transform

<style>
.wrap {
position: relative;
width: 200px;
height: 200px;
border: 1px solid blueviolet;
}
.children {
top:50%;
left:50%;
position: absolute;
transform: translate(-50%,-50%);
width: 100px;
height: 100px;
background: beige;
}
</style>
<body>
<div class="wrap">
<div class="children">子元素</div>
</div>
</body>

5.flex

<style>
.wrap {
display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 200px;
border: 1px solid blueviolet;
}
.children {
width: 100px;
height: 100px;
background: beige;
}
</style>
<body>
<div class="wrap">
<div class="children">子元素</div>
</div>
</body>

6.css-table

<style>
.wrap {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 200px;
height: 200px;
border: 1px solid blueviolet;
}
.children {
display: inline-block;
width: 100px;
height: 100px;
background: beige;
}
</style>
<body>
<div class="wrap">
<div class="children">子元素</div>
</div>
</body>