上一篇
html标记文字居中
在HTML中使文字居中，可用CSS设置text-align: center;或包裹于块级元素并设margin: auto;适用于块状内容。（56
CSS text-align 属性
| 适用场景 | 说明 | 示例代码 |
|---|---|---|
| 块级元素内的（如文字、图片） | 通过设置父元素的 text-align: center 实现内容水平居中 | html <div style="width: 50%; border: 1px solid #000; text-align: center;"> 居中的文字 </div> |
| 表格单元格 | 对 <td> 或 <th> 设置 text-align: center | html <table border="1"><tr><td style="text-align: center;">单元格内容</td></tr></table> |
Flexbox 布局
| 核心属性 | 作用 | 示例代码 |
|---|---|---|
display: flex | 激活弹性布局 | css .container { display: flex; justify-content: center; / 水平居中 / align-items: center; / 垂直居中 / } |
justify-content | 控制主轴方向对齐 | center 值使子元素水平居中 |
align-items | 控制交叉轴方向对齐 | center 值使子元素垂直居中 |
Grid 布局
| 核心属性 | 作用 | 示例代码 |
|---|---|---|
display: grid | 激活网格布局 | css .grid-container { display: grid; place-items: center; / 同时水平+垂直居中 / } |
place-items | 简写属性（等价于 justify-items + align-items） | center 值使单元格内容居中 |
已废弃的 <center> 特点 现状 替代方案 仅支持水平居中 HTML5 已废弃，不推荐使用 改用 CSS 的 text-align: center 或 Flexbox/Grid 影响所有内联内容 无法控制垂直居中 需结合其他属性实现完整居中
常见问题与解答
Q1：如何让多行文本同时水平和垂直居中？
A1：使用 Flexbox/Grid 布局。
.box {
display: flex;
justify-content: center; / 水平居中 /
align-items: center; / 垂直居中 /
height: 200px; / 容器高度 /
} 配合 <div class="box">多行<br>文本</div> 即可实现。
Q2：为什么 text-align: center 对块级元素无效？
A2：text-align 仅作用于（如文字、图片），需满足两个条件：
- 父元素必须是块级元素（如
div、p）； - 父元素需有明确宽度（否则会自动撑满容器，导致居中效果不明显）。
| 特点 | 现状 | 替代方案 |
|---|---|---|
| 仅支持水平居中 | HTML5 已废弃，不推荐使用 | 改用 CSS 的 text-align: center 或 Flexbox/Grid |
| 影响所有内联内容 | 无法控制垂直居中 | 需结合其他属性实现完整居中 |
常见问题与解答
Q1：如何让多行文本同时水平和垂直居中？
A1：使用 Flexbox/Grid 布局。
.box {
display: flex;
justify-content: center; / 水平居中 /
align-items: center; / 垂直居中 /
height: 200px; / 容器高度 /
} 配合 <div class="box">多行<br>文本</div> 即可实现。
Q2：为什么 text-align: center 对块级元素无效？
A2：text-align 仅作用于（如文字、图片），需满足两个条件：
- 父元素必须是块级元素（如
div、p）； - 父元素需有明确宽度（否则会自动撑满容器，导致居中效果不明显）。
