在现代 CSS 中，垂直居中的实现方式已经变得非常简洁直观，以下是几种推荐的 "新选择"，它们兼容性好（支持现代浏览器）且代码简洁：

1. Flexbox 布局（最常用）

Flexbox 是处理一维布局的理想选择，垂直居中只需设置父容器的align-items属性。

/* 父容器 */
.parent {
  display: flex;
  align-items: center; /* 垂直居中 */
  /* 可选：配合 justify-content 实现水平居中 */
  justify-content: center;
  height: 300px; /* 需要明确高度才能垂直居中 */
}

/* 子元素 */
.child {
  /* 无需额外设置，自动垂直居中 */
}

原理：align-items: center会使子元素在交叉轴（垂直方向，当 flex-direction 为 row 时）上居中对齐。

2. Grid 布局（更强大的二维布局）

Grid 适合处理二维布局，垂直居中可以通过父容器设置align-items，或子元素设置margin: auto。

方法 A：父容器控制

.parent {
    display: grid;
    align-items: center; /* 垂直居中 */
    justify-items: center; /* 可选：水平居中 */
    height: 300px;
}

.child {
  /* 无需额外设置 */
}

方法 B：子元素自动居中

.parent {
    display: grid;
    height: 300px;
}

.child {
    margin: auto; /* 同时实现水平和垂直居中 */
}

原理：Grid 布局中，margin: auto会使元素在可用空间中自动居中。

3. 绝对定位 +inset+margin: auto

无需计算偏移量，适合需要脱离文档流的场景。

.parent {
    position: relative;
    height: 300px;
}

.child {
    position: absolute;
    inset: 0; /* 等同于 top: 0; right: 0; bottom: 0; left: 0; */
    margin: auto; /* 自动分配剩余空间，实现居中 */
    /* 注意：子元素需要有明确的宽高（可选，根据内容自适应） */
    width: 200px;
    height: 100px;
}

原理：inset: 0使子元素填满父容器，margin: auto在剩余空间中居中。

绝对定位 + Transform

.parent {
    position: relative;
    height: 300px;
}
.child {
    position: absolute; 
    top: 50%;
    left: 50%; 
    transform: translate(-50%, -50%)
    width: 200px;
    height: 100px;
}

4.place-items简写（Grid/Flex 通用）

CSS 新增的place-items属性是align-items和justify-items的简写，可同时设置垂直和水平居中。

/* Grid 中使用 */
.parent {
    display: grid;
    place-items: center; /* 等同于 align-items: center; justify-items: center; */
    height: 300px;
}

/* Flex 中使用（仅影响 align-items，justify-content 需单独设置） */
.parent {
    display: flex;
    place-items: center; /* 仅等同于 align-items: center; */
    justify-content: center; /* 补充水平居中 */
    height: 300px;
}

总结推荐

• 简单场景（一维布局）：优先用 Flexbox（代码少，直观）。
• 复杂布局（二维布局）：用 Grid（功能更强，支持更复杂的对齐）。
• 需要脱离文档流：用 绝对定位 + inset + margin: auto。

这些方法均支持现代浏览器（Chrome、Firefox、Safari 10+、Edge），无需兼容旧浏览器（如 IE）时，完全可以替代传统的line-height或transform偏移等方法。