实现文字在块元素中水平/垂直居中详解

一、单行文字：利用 line-height（最简单方案）

原理：当块元素的 line-height 等于其 height 时，单行文字会垂直居中；配合 text-align: center 实现水平居中。

适用场景：文字为单行，且块元素高度固定。

代码示例：

<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（现代浏览器均支持）。

代码示例：

<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 等旧浏览器，或文字为多行的情况。

代码示例：

<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>），且块元素高度固定或不固定。

代码示例：

<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>

总结：不同方案对比

实际开发中，推荐优先使用 Flexbox（现代浏览器）或 定位 + transform（兼容性要求高时），根据项目的浏览器支持范围选择即可。