text-align: center 必须作用于块级父容器（如<div><p>）才能使内部行内内容水平居中，对<span>等内联元素本身无效；它只控制内容排布，不改变元素自身位置。

用 text-align: center 让段落或容器内文字水平居中

这是最常用也最可靠的方式，适用于 <p>、<div>、<h1> 等块级元素。关键不是给文字本身加样式，而是给它所在的“父容器”设置居中对齐。

常见错误是直接在 <span> 或内联元素上写 text-align: center——这无效，因为 text-align 只对块级容器起作用。

• 正确写法：

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

• 如果用 CSS 文件，推荐写成：

  .center-text { text-align: center; }

  ，然后在 HTML 中加 class="center-text"
• 注意：这个属性只影响**行内内容的水平对齐**，不影响元素自身在页面中的位置（比如不会让 <div> 在视口中间）

margin: auto 不能直接让文字居中，但能居中块级元素本身

有人试过给 <p> 写 margin: auto，发现没反应——这是因为 margin: auto 要求元素有明确宽度（width），且必须是块级元素（默认满足），但它居中的是这个块，不是里面文字。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 想让一个卡片居中显示，可以：

  <div style="width: 300px; margin: auto">文字</div>

• 此时文字是否居中，仍取决于该 <div> 是否设置了 text-align: center
• 对 <span> 或未设宽的 <div> 直接写 margin: auto，浏览器会忽略

别用已废弃的 <center> 标签

老教程里可能看到 <center>文字</center>，它确实能让文字居中，但早在 HTML5 就被正式废弃，现代浏览器虽大多还兼容，但校验器报错、团队协作中会被 lint 工具拦截，而且无法配合响应式设计灵活控制。

立即学习“前端免费学习笔记（深入）”；

• VS Code 或 WebStorm 开启 HTML 校验时，会标红提示 Element 'center' is obsolete
• 如果 legacy 项目里见到，建议逐步替换成 text-align: center 或 Flex 布局
• 没有理由在新项目中选择它

需要真正“页面居中”？得组合用 text-align + 块级宽度 + margin

单纯让文字居中 ≠ 让整个内容区域在视口中央。比如一个标题要水平垂直都居中，就得额外处理容器定位。

• 水平居中文字：父容器加 text-align: center
• 同时让该容器自己居中：设 width + margin: 0 auto
• 垂直居中需另加布局逻辑，例如用 display: flex 配合 justify-content 和 align-items，单靠 text-align 不行
• 移动端要注意：设固定 width 可能导致小屏溢出，优先考虑 max-width 和响应式单位（如 rem 或百分比）

实际写的时候，90% 场景只需一行 text-align: center 加在包裹容器上。容易卡住的地方往往是误选了内联元素当目标，或者把“文字居中”和“元素居中”混为一谈。