text-align: center仅使父容器内行内内容水平居中，不能让<div>或<p>自身居中；块级元素自身居中需用margin: 0 auto（须设明确宽度）或flex布局（父容器设display: flex并配合justify-content: center）。

text-align 不能让 <div> 或 <p> 自身居中

初学者常以为 text-align: center 能把整个块居中，结果发现只是里面文字居中了，块本身还在左边。这是因为 text-align 只控制**行内内容对齐**，不是块级元素的定位方式。

真正让块级元素（如 <div>、<p>、<section>）水平居中，得靠外边距或 flex 布局：

• margin: 0 auto：适用于有明确宽度的块（比如 width: 300px），且父容器是块级上下文
• display: flex; justify-content: center：父容器设为 flex，子块自动居中，无需写宽度
• 避免用 float 或绝对定位做居中——复杂、易出错、不响应式

用 margin: 0 auto 居中时必须设宽度

这是最常踩的坑：只写 margin: 0 auto 却没给元素设 width，结果完全没反应。因为块级元素默认宽度是 100%，左右 margin 都是 auto 也没空间可分。

正确写法示例：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

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

<div style="width: 400px; margin: 0 auto;">
  这个 div 会水平居中
</div>

• 宽度可以是 px、%、em，但不能是 auto（除非配合 max-width）
• 如果父容器是 display: inline-block 或 float，margin: 0 auto 会失效
• 移动端要注意：固定像素宽在小屏上可能溢出，建议搭配 max-width: 100%

flex 布局更可靠，但要作用在父容器上

想让某个 <div> 居中，别给它自己加 display: flex，而是给它的**直接父元素**设 flex：

<div style="display: flex; justify-content: center;">
  <p>这段文字所在的 p 会水平居中</p>
</div>

• justify-content: center 控制主轴（默认是水平）对齐；align-items: center 才能垂直居中
• 父容器需有高度（比如 min-height: 100vh），否则 align-items 看不出效果
• IE10+ 支持 flex，但旧版 IE 不支持 justify-content 的某些值（如 space-between）

文本对齐和块对齐别混用

text-align 和块级居中是两套逻辑，混用容易误导：

• text-align: right → 文字右对齐，块本身不动
• margin-left: auto → 块右移（需有宽度或配合 margin-right: 0）
• 想让一段文字“右对齐且整段右偏”，应该用 text-align: right + 父容器 text-align: right，而不是试图移动 <p>
• 表格单元格里的文本对齐用 text-align 没问题，但表格本身居中仍要靠 margin: 0 auto 或 flex

真正难的不是写哪一行代码，而是分清“内容对齐”和“容器定位”这两个层次。多数初学者卡住，是因为在错误的层级上动样式。