HTML如何设置div文字居中？

在HTML中实现div内文字居中显示是前端开发的基础技能，可通过多种CSS方法实现,以下是5种常用方案及详细代码示例：

水平居中 + 垂直居中（推荐方案）

<div class="center-box">居中文字</div>
<style>
.center-box {
  display: flex;          /* 弹性布局 */
  justify-content: center; /* 水平居中 */
  align-items: center;    /* 垂直居中 */
  width: 300px;
  height: 200px;
  border: 1px solid #ccc;
}
</style>

优势：代码简洁、响应式友好、支持多行文本

传统文本居中方案

.center-box {
  text-align: center;     /* 水平居中 */
  line-height: 200px;     /* 垂直居中（需等于height） */
  height: 200px;
  width: 300px;
}

注意：仅适用于单行文本，多行文本会出现错位

Grid网格布局方案

.center-box {
  display: grid;
  place-items: center;    /* 同时居中 */
  width: 300px;
  height: 200px;
}

特点：现代浏览器支持，二维布局控制更精准

绝对定位方案

.parent-box {
  position: relative;
  width: 300px;
  height: 200px;
}
.center-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

适用场景：需要相对父容器定位的复杂布局

表格单元格方案

.container {
  display: table;
  width: 300px;
  height: 200px;
}
.center-box {
  display: table-cell;
  vertical-align: middle; /* 垂直居中 */
  text-align: center;     /* 水平居中 */
}

兼容性：支持IE8+等老旧浏览器

方案选择建议

常见问题排查

1. 高度不生效：检查父元素是否设置明确高度
2. Flex失效：确保浏览器支持（可加前缀 display: -webkit-flex）
3. 定位偏移：检查父元素是否设置 position: relative

引用说明：本文方法参考MDN Web文档的CSS布局指南（2025版）及W3C CSS2.1规范，实践代码已在Chrome、Firefox、Edge最新版验证,部分方案需注意IE兼容性。