让元素水平垂直居中的七种方法，垂直居中再也不用烦恼了！

2023-10-14 17:27:01

1. 使用 Flexbox 布局（适用于子元素是行内元素、行内块元素、块元素）

Flexbox 布局是 CSS 中一种灵活的布局方式，适用于子元素是行内元素、行内块元素、块元素，适用性比较广。要使用 Flexbox 布局，您可以使用以下代码：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

2. 使用绝对定位（适用于子元素是行内元素、行内块元素、块元素）

绝对定位是一种将元素从正常文档流中移除并将其相对于其父元素进行定位的方式。要使用绝对定位，您可以使用以下代码：

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

3. 使用百分比高度和垂直边距（适用于子元素是块元素）

这种方法适用于子元素是块元素的情况。要使用这种方法，您可以使用以下代码：

.container {
  height: 100vh;
  margin: 0 auto;
}

4. 使用行内块元素和文本对齐（适用于子元素是行内元素）

这种方法适用于子元素是行内元素的情况。要使用这种方法，您可以使用以下代码：

.container {
  display: inline-block;
  vertical-align: middle;
}

5. 使用表格布局（适用于子元素是行内元素、行内块元素、块元素）

表格布局是一种将元素排列成表格格式的布局方式。要使用表格布局，您可以使用以下代码：

<table>
  <tr>
    <td>
      <div class="container">居中的元素</div>
    </td>
  </tr>
</table>

6. 使用网格布局（适用于子元素是行内元素、行内块元素、块元素）

网格布局是一种将元素排列成网格状的布局方式。要使用网格布局，您可以使用以下代码：

.container {
  display: grid;
  place-items: center;
}

7. 使用伪元素（适用于子元素是行内元素、行内块元素、块元素）

伪元素是一种不存在于文档流中的元素，但可以通过 CSS 来创建。要使用伪元素，您可以使用以下代码：

.container {
  position: relative;
}

.container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: black;
  opacity: 0.5;
}

.container::after {
  content: "居中的元素";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}