垂直对齐 div

在 web 开发中，垂直对齐 div 是一个常见需求。本文将介绍几种实现垂直对齐 div 的方法。

方法一：使用 display: flex

使用 display: flex 可以很方便地实现垂直对齐 div。

<div class="container">
  <div class="child"></div>
</div>

.container {
  display: flex;
  align-items: center; /* 垂直居中 */
}

方法二：使用 position 和 transform

使用 position 和 transform 也可以实现垂直对齐 div。

<div class="container">
  <div class="child"></div>
</div>

.container {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

方法三：使用 display: table-cell

使用 display: table-cell 也可以实现垂直对齐 div。

<div class="container">
  <div class="child"></div>
</div>

.container {
  display: table-cell;
  vertical-align: middle; /* 垂直居中 */
}

总结

以上三种方法均可以实现垂直对齐 div，可以根据具体情况选择合适的方法。

• 使用 display: flex 适用于现代浏览器。
• 使用 position 和 transform 适用于需要支持旧版 IE 浏览器。
• 使用 display: table-cell 适用于需要支持更旧的浏览器。

注意： 实现垂直对齐 div 时，其父元素必须具有一定的高度，否则会导致居中效果失败。

以上内容已按 markdown 格式编写，可直接复制粘贴使用。