水平/垂直居中总结

在 CSS 中，水平和垂直居中布局是一个非常常见的需求。根据不同的布局情况，可以使用不同的方法来实现元素的水平和垂直居中。以下是几种常见的实现方法：

1. 使用 flexbox

flexbox 是最简单和最推荐的方法，适用于未知宽高的元素。

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100vh; /* 如果需要整个屏幕高度居中 */
}

2. 使用 grid

CSS Grid 也是一个强大的布局工具，可以轻松实现居中。

.container {
  display: grid;
  place-items: center; /* 水平和垂直居中 */
  height: 100vh; /* 如果需要整个屏幕高度居中 */
}

3. 使用绝对定位和transform

适用于已知宽高的元素。

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

.element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 使用 transform 实现居中 */
}

4. 使用绝对定位和 margin

这种方法适用于已知宽高的元素。

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

.element {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px; /* 元素高度的一半 */
  margin-left: -50px; /* 元素宽度的一半 */
  width: 100px; /* 元素宽度 */
  height: 100px; /* 元素高度 */
}

5. 使用 table 和 table-cell

这种方法主要用于需要支持非常旧的浏览器时。

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

.element {
  display: table-cell;
  text-align: center; /* 水平居中 */
  vertical-align: middle; /* 垂直居中 */
}

6. 使用 line-height 和 text-align（仅适用于单行文本）

用于文本水平垂直居中。

.container {
  height: 100vh;
  line-height: 100vh; /* 行高设置为容器高度 */
  text-align: center; /* 水平居中 */
}

总结

• 未知宽高的元素：flexbox 和 grid 是最佳选择。
• 已知宽高的元素：可以选择绝对定位加 transform 或 margin 的方法。
• 单行文本：可以使用 line-height 和 text-align 方法。

水平居中

垂直居中

• CSS垂直居中的12种实现方式 - 掘金
• CSS让DIV上下左右居中的方法_pan_junbiao的博客-CSDN博客
• 绝对定位元素设置水平居中