CSS 与 Flexbox 垂直对齐

当需要让多个元素在一个容器内垂直对齐时，Flexbox 可以成为优秀的选择。

使用 Flexbox 垂直对齐

要使用 Flexbox 垂直对齐元素，需要将容器的 display 属性设置为 flex，并将容器内的元素的 align-items 属性设置为 center。以下是一个简单的示例代码：

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

<style>
  .container {
    display: flex;
    align-items: center;
  }
</style>

以上代码会分别显示 3 个盒子，每个盒子的高度和宽度都不同。通过设置容器的 display 属性为 flex，我们可以使这些元素垂直对齐。

使用 CSS 垂直对齐

如果您不想使用 Flexbox 或您需要更为精确地控制垂直对齐，您可以使用 CSS。以下是一个简单的示例代码：

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

<style>
  .container {
    height: 300px; /* 指定容器高度 */
    line-height: 300px; /* 设置文本行高等于容器高度，从而产生垂直居中的效果 */
  }

  .item {
    display: inline-block; /* 将元素显示为内联盒子 */
    vertical-align: middle; /* 设置元素垂直对齐方式为中线对齐 */
  }
</style>

以上CSS代码将容器的高度设置为 300 像素，通过将容器的 line-height 属性设置为容器的高度，我们使得文本在垂直方向上居中。此外，我们通过将元素的 display 属性设置为 inline-block，vertical-align 属性设置为 middle，也实现了垂直对齐的效果。

结论

使用 Flexbox 或 CSS 垂直对齐，可以轻松实现元素在容器内的垂直对齐。Flexbox 垂直对齐更为简单，适用于多元素情况。而使用 CSS 垂直对齐可以更加精确地控制垂直对齐的效果，适用于简单的情况。