一、单行文字：利用 line-height（最简单方案）
原理 ：当块元素的 line-height 等于其 height 时，单行文字会垂直居中；配合 text-align: center 实现水平居中。
适用场景：文字为单行，且块元素高度固定。
代码示例：
html
<div class="box">单行文字居中</div>
<style>
.box {
width: 200px;
height: 100px; /* 固定高度 */
background: #f0f0f0;
/* 水平居中 */
text-align: center;
/* 垂直居中：line-height = height */
line-height: 100px;
}
</style>二、多行文字/高度不固定：Flexbox 布局（推荐现代方案）
原理 ：利用 Flex 布局的对齐属性，无需关心块元素高度和文字行数，直接通过 justify-content（水平）和 align-items（垂直）居中。
适用场景：文字为多行、块元素高度固定或不固定，且浏览器支持 Flexbox（现代浏览器均支持）。
代码示例：
html
<div class="box">
多行文字居中<br>
这是第二行
</div>
<style>
.box {
width: 200px;
/* 高度可固定或不固定（此处不固定，由内容撑开） */
padding: 20px;
background: #f0f0f0;
/* 开启Flex布局 */
display: flex;
/* 水平居中（主轴对齐） */
justify-content: center;
/* 垂直居中（交叉轴对齐） */
align-items: center;
/* 文字换行（可选，避免内容溢出） */
flex-wrap: wrap;
}
</style>三、兼容旧浏览器：table-cell 布局
原理 ：将块元素模拟为表格单元格，利用表格的 vertical-align: middle 实现垂直居中，配合 text-align: center 水平居中。
适用场景：需要兼容 IE8 等旧浏览器，或文字为多行的情况。
代码示例：
html
<div class="box">
多行文字居中<br>
兼容旧浏览器方案
</div>
<style>
.box {
width: 200px;
height: 100px; /* 可固定或不固定 */
background: #f0f0f0;
/* 模拟表格单元格 */
display: table-cell;
/* 垂直居中（表格单元格特性） */
vertical-align: middle;
/* 水平居中 */
text-align: center;
}
</style>四、定位 + transform（通用方案）
原理 ：通过绝对定位将文字容器定位到块元素中心，再用 transform 微调偏移量，适合各种场景。
适用场景 ：文字容器为块元素的子元素（如 <span> 或 <p>），且块元素高度固定或不固定。
代码示例：
html
<div class="box">
<p class="text">定位实现的居中</p>
</div>
<style>
.box {
width: 200px;
height: 100px;
background: #f0f0f0;
/* 父元素相对定位 */
position: relative;
}
.text {
/* 子元素绝对定位 */
position: absolute;
/* 定位到父元素50%位置 */
top: 50%;
left: 50%;
/* 微调自身偏移（基于自身尺寸的50%） */
transform: translate(-50%, -50%);
/* 水平居中（可选，若文字长度超过容器宽度） */
text-align: center;
margin: 0; /* 清除默认margin */
}
</style>总结：不同方案对比
| 方法 | 适用场景 | 优点 | 缺点 |
|---|---|---|---|
line-height |
单行文字、固定高度 | 简单直观，性能好 | 仅支持单行，高度必须固定 |
| Flexbox | 单行/多行、任意高度 | 灵活通用，代码简洁 | 旧浏览器（如IE8）不支持 |
table-cell |
多行文字、需兼容旧浏览器 | 兼容性好，支持多行 | 语义化稍弱（模拟表格） |
| 定位 + transform | 任意场景 | 无高度限制，兼容性较好 | 需要额外嵌套（子元素） |
实际开发中，推荐优先使用 Flexbox （现代浏览器）或 定位 + transform（兼容性要求高时），根据项目的浏览器支持范围选择即可。