html 文本垂直居中

### 实现文本垂直居中的多种CSS技巧

#### 使用 `line-height` 属性
对于单行文本，在已知容器高度的情况下，可以简单地通过设置 `line-height` 的值等于容器的高度来达到垂直居中的效果[^1]。

div {
    width: 400px;
    height: 300px;
    background-color: brown;
}

p {
    line-height: 300px; /* 容器高度 */
}

这种方法仅适用于单行文本，因为如果应用于多行文本，则会使得每行之间的间距变得异常大，破坏布局美观度。

#### 利用表格显示模式
针对多行文本的情况，可以通过模拟表格结构的方式来处理。具体做法是将外部容器定义为 `display: table;`，而内部包含文本的元素则设为 `display: table-cell;` 并应用 `vertical-align: middle;` 来完成垂直居中操作[^4]。

.container {
    display: table;
    width: 100%;
    height: 200px;
    border: 1px solid black;
}

.text-block {
    display: table-cell;
    vertical-align: middle;
    text-align: center; /* 可选：用于水平居中 */
}

此方案兼容性较好，并且能够很好地支持不同数量的文字内容自动调整位置。

#### Flexbox 布局方式
现代浏览器广泛支持Flex弹性盒子模型，它提供了更加灵活简便的方法来进行项目排列与定位。只需给父级元素添加特定样式就能轻松搞定子项的垂直及水平方向上的精准控制[^2]。

.parent {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center;     /* 垂直居中 */
    min-height: 200px;
}

这种方式不仅限于文字内容，还可以作用于图片或其他类型的DOM节点之上，具有很高的通用性和扩展性。