html输出文字居中显示

CSS text-align 属性

适用场景：

块级元素（如 <div>、<p>）内的行内内容（文字、图片等）水平居中。

实现方法：

<div style="text-align: center;">
  这段文字会水平居中
</div>

原理：

text-align: center 将元素内的行内内容（非块级子元素）水平居中。

Flex 布局

适用场景：

需要同时控制水平和垂直居中,或对块级子元素整体居中。

实现方法：

<div style="display: flex; justify-content: center; align-items: center;">
  <div>块级子元素居中</div>
</div>

原理：

• justify-content: center：水平方向居中。
• align-items: center：垂直方向居中。

Grid 布局

适用场景：

复杂布局中的居中对齐,尤其是多行多列的场景。

实现方法：

<div style="display: grid; place-items: center;">
  <div>网格内容居中</div>
</div>

原理：

place-items: center 是 justify-content: center 和 align-content: center 的简写。

表格中的 align 属性（已过时）

适用场景：

老旧表格布局中单元格内容的水平居中。

实现方法：

<table border="1">
  <tr>
    <td align="center">表格内容居中</td>
  </tr>
</table>

注意：

现代开发推荐使用 CSS 的 text-align: center 替代。

内联元素的居中技巧

适用场景：

行内元素（如 <span>、<a>）或块级元素设置为 inline-block 后的居中。

实现方法：

<div style="text-align: center;">
  <span style="display: inline-block;">内联元素居中</span>
</div>

原理：

将内联元素转为 inline-block，触发 text-align 的居中效果。

多行文本垂直居中（高级）

适用场景：

固定高度容器内多行文本的垂直居中。

实现方法：

<div style="height: 200px; display: flex; align-items: center; justify-content: center;">
  <div>多行文本<br>垂直居中</div>
</div>

原理：

通过 Flex 布局的 align-items 和 justify-content 同时控制水平和垂直方向。

特殊场景：图片居中

实现方法：

<div style="text-align: center;">
  <img src="image.jpg" alt="图片" />
</div>

补充：

若需图片在容器内完全居中（含垂直方向），需使用 Flex 或 Grid。

归纳对比表

相关问题与解答

问题1：如何让图片在父容器中完全居中？

解答：
使用 Flex 布局：

<div style="display: flex; justify-content: center; align-items: center;">
  <img src="image.jpg" alt="图片" />
</div>

justify-content 控制水平居中，align-items 控制垂直居中。

问题2：为什么 text-align: center 对块级子元素无效？

解答：
text-align 仅作用于行内内容（如文字、图片），对块级子元素（如 <div>）无效，若需块级子元素居中，需使用 Flex/Grid 或设置 `margin: auto