如何让div文字纵向居中

### 使用 `line-height` 实现文字纵向居中

对于单行文本，可以通过设置容器的高度 (`height`) 和相同的行高 (`line-height`) 来实现文字的垂直居中效果。这种方法适用于已知高度的情况。

.container {
    height: 100px;
    line-height: 100px; /* 设置与高度相等 */
    text-align: center;
}

这种方式简单有效，但仅限于单行文本[^1]。

### 利用 Flexbox 布局实现文字纵向居中

Flexbox 提供了一种更灵活的方式来处理多行文本或其他复杂情况下的垂直居中需求：

.parent {
    display: flex;
    align-items: center; /* 子元素沿交叉轴中心对齐 */
    justify-content: center; /* 主轴方向也居中 */
    min-height: 100vh; /* 或者其他指定高度 */
}

.child {
    /* 可选样式 */
}

此方案不仅支持多行文本，还能够适应不同尺寸的内容[^4]。

### 应用 Grid 布局达成相同目的

CSS Grid 同样能很好地解决这个问题，并且语法简洁明了：

.grid-container {
    display: grid;
    place-items: center; /* 简写属性，同时控制水平和垂直居中 */
    min-height: 100vh; /* 调整为实际需要的高度 */
}

Grid 的优势在于其强大的布局能力以及良好的浏览器兼容性[^3]。

### 绝对定位配合 transform 属性

当不知道子元素的具体大小时，可以借助绝对定位加上 `transform` 函数来完成精准居中操作：

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

这种技术不需要预先知道目标元素的确切宽高就能达到理想的居中效果[^5]。