<body>
<div class="p">
<div class="c">
垂直居中
</div>
</div>
</body>
父元素设置样式:
.p {
display: flex;
align-items: center;
justify-content: center;
}
父元素：
.p {
height: 100%;
padding: 0;
margin: 0;
}
子元素：
.c {
margin: 0 auto;
width: 300px;
position: relative;
top: 50%;
transform: translateY(-50%);
}
注意：
必须给子元素设置宽度；
子元素必须是块元素；
父元素：
.p {
height: 100%;
padding: 0;
margin: 0;
}
子元素：
.c {
margin: 0 auto;
width: 300px;
height: 200px;
position: relative;
top: 50%;
margin-top: 100px;
}
注意：
必须给子元素设置宽度；
必须给子元素设置高度；
子元素必须是块元素；
父元素相对定位 :
.p{
height: 200px;
position: relative;
}
子元素：
.c {
position: absolute;
margin: auto;
top: 0;
bottom: 0;
right: 0;
left:0;
width: 50px;
height: 50px;
border: 1px solid red;
}
注意：
必须给子元素设置宽度；
必须给子元素设置高度；
父元素 :
.p{
width: 200px;
height: 200px;
text-align: center;
}
伪元素:
.p::after {
content: ‘‘,
height: 100%;
vertical-align: center;
display: inline-block;
}
子元素：
.c {
dislpay: inline-block;
border: 1ps solid red;
}
注意：
子元素是内联元素
原文：https://www.cnblogs.com/vs1435/p/12621256.html