<html>
<head>
<style>
.parent {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 100vw;
height: 90vh;
background-color: yellowgreen;
}
.son {
display: inline-block;
width: 200px;
height: 200px;
background-color: Indigo;
}
</style>
</head>
<body>
<div class='parent'>
<div class='son'></div>
</div>
</body>
</html>
伪元素
适用场景：父子宽高都可未知，子元素需为行内块元素(这种方式其实就是使用伪元素的高度为100%，子元素和伪元素都设置 vertical-align: middle实现垂直居中的效果)
<html>
<head>
<style>
.parent {
height: 100vh;
width: 100vw;
text-align: center;
background: #c0c0c0;
} .parent:before {
content: "200B";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.son {
display: inline-block;
vertical-align: middle;
width: 200px;
height: 200px;
padding: 10px 15px;
background: #f5f5f5;
}
</style>
</head>
<body>
<div class="parent">
<div class="son"></div>
</div>
</body>
</html>
