text-align: center仅使父容器内行内内容水平居中，不能让或自身居中；块级元素自身居中需用margin: 0 auto（须设明确宽度）或flex布局（父容器设display: flex并配合justify-content: center）。
text-align 不能让 <div> 或 <code><p></p> 自身居中
初学者常以为 text-align: center 能把整个块居中，结果发现只是里面文字居中了，块本身还在左边。这是因为 text-align 只控制**行内内容对齐**，不是块级元素的定位方式。
真正让块级元素（如 <div>、<code><p></p>、<section></section>）水平居中，得靠外边距或 flex 布局：
-
margin: 0 auto：适用于有明确宽度的块（比如width: 300px），且父容器是块级上下文 -
display: flex; justify-content: center：父容器设为 flex，子块自动居中，无需写宽度 - 避免用
float或绝对定位做居中——复杂、易出错、不响应式
用 margin: 0 auto 居中时必须设宽度
这是最常踩的坑：只写 margin: 0 auto 却没给元素设 width，结果完全没反应。因为块级元素默认宽度是 100%，左右 margin 都是 auto 也没空间可分。
正确写法示例：
<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> 居中，别给它自己加 <code>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></p> - 表格单元格里的文本对齐用
text-align没问题，但表格本身居中仍要靠margin: 0 auto或 flex
真正难的不是写哪一行代码，而是分清“内容对齐”和“容器定位”这两个层次。多数初学者卡住，是因为在错误的层级上动样式。
