使 Div 在父 div 内垂直居中
使 div 在其父 div 内垂直居中可以通过多种方法实现，无需依赖特定元素尺寸。
表格布局（经典方法）
此方法利用表格布局和内联块显示属性。
<div class="container">
<div class="inner">
...
</div>
</div>.container {
display: table-cell;
vertical-align: middle;
height: 500px;
width: 500px;
}
.inner {
display: inline-block;
width: 200px;
height: 200px;
}变换（现代方法）
转换为垂直领域提供了更简单的解决方案
.container {
position: relative;
height: 500px;
width: 500px;
}
.inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
}Flexbox（首选现代方法）
Flexbox 提供了最直接的居中对齐方法。
.container {
display: flex;
justify-content: center;
align-items: center;
height: 500px;
width: 500px;
}
.inner {
width: 200px;
height: 200px;
}注意：
以上是如何使 Div 在其父 Div 中垂直居中？的详细内容。更多信息请关注PHP中文网其他相关文章！
