面试的时候，经常被问到css中div垂直居中的问题，趁现在整理的方法比较全面，记录下来！
相对于整个浏览器可见窗口的居中显示
宽高已知，利用margin-top和margin-left实现：
代码如下：
<!DOCTYPE html>
<html>
<head>
<style>
.content {
position: absolute;
width: 200px;
height: 200px;
left: 50%;
top: 50%;
margin-top: -100px; /* 高度的一半 */
margin-left: -100px; /* 宽度的一半 */
background: red;
}
</style>
</head>
<body>
<div class="content">
居中蓄力中
</div>
</body>
</html>
页面显示如下所示：
要点：
明确div的宽高之后，首先设置left、top均为50%，然后设置margin-left、margin-top分别为width、height的一半即可。
在大小固定的容器中居中显示
一、内部div宽高已知
（1）借助设置margin-left、margin-top实现居中
<!DOCTYPE html>
<html>
<head>
<style>
/* 方法1：内部div宽高已知，则借助margin-top和margin-left为宽高的一半实现居中显示 */
.box {
position:relative;
width: 300px;
height: 300px;
border: 2px solid black;
}
.box1 {
position:absolute;
width: 100px;
height: 100px;
top:50%;
left:50%;
margin-top: -50px;
margin-left: -50px;
font-size: 12px;
background: red;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">方法1：内部div宽高已知，则借助margin-top和margin-left为宽高的一半实现居中显示 </div>
</div>
</body>
</html>
页面显示如下所示：
要点
明确div的宽高之后，首先设置left、top均为50%，然后设置margin-left、margin-top分别为width、height的一半即可（与相对浏览器可见窗口居中显示设置要点相同）。
（2）借助设置margin:auto方法实现居中
<!DOCTYPE html>
<html>
<head>
<style>
/* 方法2：借助margin:auto实现 */
.box2 {
position:relative;
width: 300px;
height: 300px;
border: 2px solid black;
}
.box3 {
position:absolute;
width: 100px;
height: 100px;
left:0px;
top:0px;
right:0px;
bottom:0px;
margin:auto;
background: red;
}
</style>
</head>
<body>
<div class="box2">
<div class="box3">方法2：借助margin:auto实现</div>
</div>
</body>
</html>
页面显示如下所示：
要点
明确div的宽高之后，首先设置left、right、top、bottom均为0px，然后设置margin:auto即可。
二、内部div宽高未知
（1）借助设置transform: translate(-50%,-50%)实现居中
<!DOCTYPE html>
<html>
<head>
<style>
/* 方法3：借助设置transform: translate(-50%,-50%)实现居中 */
.box4 {
position:relative;
width: 300px;
height: 300px;
border: 2px solid black;
}
.box5 {
position:absolute;
/* width: 100px;
height: 100px; */
left:50%;
top:50%;
transform: translate(-50%,-50%);
background: red;
}
</style>
</head>
<body>
<div class="box4">
<div class="box5">方法3：借助设置transform: translate(-50%,-50%)实现居中</div>
</div>
</body>
</html>
页面显示如下所示：
要点
首先设置left、top均为50%，然后设置transform: translate(-50%,-50%)即可。
（2）借助弹性盒模型实现
<!DOCTYPE html>
<html>
<head>
<style>
/* 方法4：借助弹性盒模型实现 */
.box6 {
position:relative;
width: 300px;
height: 300px;
border: 2px solid black;
display:flex;
justify-content: center;
align-items: center;
}
.box7 {
/* width: 100px;
height: 100px; */
background: red;
}
</style>
</head>
<body>
<div class="box6">
<div class="box7">方法4：借助弹性盒模型实现</div>
</div>
</body>
</html>
页面显示如下所示：
要点
通过对外层div容器设置弹性盒模型实现，即首先设置显示方式为弹性盒模式：display:flex;然后将弹性盒子元素在主轴（横轴）方向上的对齐方式设置为居中：justify-content: center;最后设置弹性盒子项在弹性盒容器的当前行的侧轴（纵轴）方向上的对齐方式为居中：align-items: center;即可。
（3）借助设置display:table-cell实现居中
<!DOCTYPE html>
<html>
<head>
<style>
/* 方法5：借助display:table-cell实现 */
.box8 {
position:relative;
width: 300px;
height: 300px;
display:table-cell;
text-align: center;
vertical-align: middle;
border: 2px solid black;
}
.box9 {
/* width: 100px;
height: 100px; */
background: red;
display:inline-block;
}
</style>
</head>
<body>
<div class="box8">
<div class="box9">方法5：借助display:table-cell实现</div>
</div>
</body>
</html>
页面显示如下所示：
要点
通过将外层div容器作为一个表格单元格显示，即首先设置显示方式为表格单元格：display:table-cell;然后对单元格内容设置左右居中：text-align: center;接着对单元格内容设置上下居中：vertical-align: middle;最后设置单元格中内容部分为行内块元素display:inline-block;即可。
参考文献：https://blog.csdn.net/pinbolei/article/details/84105893
