如何使 Div 在其父 Div 中垂直居中？

使 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;
}

注意：

• 表格布局方法得到了很好的支持，但可能会影响性能。
• Transform 和 Flexbox 提供了具有更强支持和易用性的现代解决方案。
• 无论表格的尺寸或内容如何，​​这些方法都可确保垂直居中内部 div。

以上是如何使 Div 在其父 Div 中垂直居中？的详细内容。更多信息请关注PHP中文网其他相关文章！