html垂直居中

实现 HTML 元素的垂直居中有多种方法，以下是其中几种：

1. 使用 Flexbox

使用 Flexbox 可以非常方便地实现元素的垂直居中。设置父元素的 `display` 属性为 `flex`，然后使用 `align-items` 属性将子元素垂直居中。

<div class="container">
  <div class="centered">内容</div>
</div>

.container {
  display: flex;
  align-items: center;
  height: 100vh;
}

.centered {
  margin: auto;
}

2. 使用绝对定位和 transform

通过将子元素的 `position` 属性设置为 `absolute`，然后使用 `transform` 属性将其向下移动一半高度的距离，可以实现垂直居中。

<div class="container">
  <div class="centered">内容</div>
</div>

.container {
  position: relative;
  height: 100vh;
}

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

3. 使用表格布局

使用表格布局可以实现元素的垂直居中。将父元素的 `display` 属性设置为 `table`，然后将子元素的 `display` 属性设置为 `table-cell`，并使用 `vertical-align` 属性将其垂直居中。

<div class="container">
  <div class="centered">内容</div>
</div>

.container {
  display: table;
  height: 100vh;
}

.centered {
  display: table-cell;
  vertical-align: middle;
}