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

一、单行文字：利用 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（兼容性要求高时），根据项目的浏览器支持范围选择即可。