html怎么居中字体

使用 text-align 属性居中文本

text-align: center 是 CSS 中用于水平居中文本的常用属性，适用于块级元素（如 <div>、<p> 等）。

示例代码：

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

说明：

• text-align: center 仅对行内内容（如文字、图片）生效。
• 如果直接对 <span> 等行内元素设置 text-align，需将其包裹在块级元素中。

通过 margin: auto 实现块级元素居中

对于块级元素（如 <div>），可以通过自动计算左右外边距实现水平居中。

示例代码：

<div style="width: 300px; margin: 0 auto; background: #f0f0f0;">
    <p>块级元素整体居中</p>
</div>

说明：

• 需设置元素的 width（非百分比宽度）。
• margin: 0 auto 会自动分配左右外边距，使元素水平居中。

使用 Flexbox 布局居中内容

Flexbox 是现代 CSS 布局方案，可轻松实现元素水平和垂直居中。

示例代码：

<div style="display: flex; justify-content: center; align-items: center; height: 200px;">
    <p>Flexbox 居中</p>
</div>

说明：

• justify-content: center：水平居中。
• align-items: center：垂直居中。
• 适用于单行或单列内容的居中。

方法对比表格

常见问题与解答

为什么 text-align: center 对 <span> 不生效？

• 原因：<span> 是行内元素，text-align 仅对块级元素内的行内内容生效。
• 解决方法：将 <span> 包裹在块级元素（如 <div>）中，再设置 text-align: center。

如何让多行文本在容器中垂直居中？

• 方法：使用 Flexbox 布局。
• 示例代码：

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

• 说明：flex-direction: column 将子元素垂直排列，`justify-content: center