写出你知道的CSS水平和垂直居中的方法

CSS 水平和垂直居中的方法有很多，以下是几种常见且实用的方法，涵盖了不同场景和兼容性：

1. Flexbox 布局 (推荐)

这是现代 CSS 中最灵活和常用的居中方法，兼容性也很好。

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

.content {
  /* ... 其他样式 ... */
}

• .container 是父容器，.content 是需要居中的子元素。
• justify-content 控制水平方向上的对齐方式。
• align-items 控制垂直方向上的对齐方式。

2. Grid 布局

Grid 布局同样强大且灵活，也能轻松实现居中。

.container {
  display: grid;
  place-items: center; /* 水平 and 垂直居中 */
}

.content {
  /* ... 其他样式 ... */
}

• place-items 是 align-items 和 justify-items 的简写，可以同时设置水平和垂直居中。

3. Absolute Positioning + Transforms

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

.container {
  position: relative;
}

.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* ... 其他样式 ... */
}

• top: 50%; left: 50%; 将子元素的左上角移动到父元素的中心。
• transform: translate(-50%, -50%); 将子元素自身向左上偏移自身宽度和高度的一半，从而实现居中。

4. Absolute Positioning + Margin: auto

这种方法也适用于已知子元素宽高的情况。

.container {
  position: relative;
}

.content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  /* ... 其他样式 ... */
}

• 设置 top, left, right, bottom 都为 0，并将 margin 设置为 auto，可以让浏览器自动计算 margin 值以实现居中。

5. Table-cell 方法 (不太推荐)

这种方法利用了表格单元格的垂直居中特性，但语义化不够好，尽量避免使用。

.container {
  display: table;
  width: 100%; /* or a fixed width */
  height: 100%; /* or a fixed height */
}

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

.content {
  /* ... 其他样式 ... */
  display: inline-block; /* 为了 text-align 生效 */
}

• 需要一个额外的 .content-wrapper 元素。

选择哪种方法？

• 优先使用 Flexbox 或 Grid，它们更灵活、更易于维护。
• 如果子元素宽高已知，Absolute Positioning + Transforms 是一个不错的选择，性能也很好。
• 尽量避免使用 Table-cell 方法。

希望以上信息能帮助你!