text-align:center只作用于父元素内的行内内容，不能使块级子元素居中或改变父元素自身位置；它对文字、<img>、<span>等行内级内容有效，但对默认块级的<div>无效，除非将其设为inline-block或改用margin:0 auto/flex布局。
text-align:center 只作用于父元素内部的行内内容
它不会让块级子元素居中，也不会改变父元素自身位置。常见错误是给一个 <div> 自己设 text-align: center，却期望整个 <div> 在页面里居中——这不行，text-align 管的是“里面的东西怎么排”，不是“自己怎么摆”。
真正起效的前提是：目标内容必须是行内级（inline）、行内块（inline-block）、行内表格（inline-table）或纯文本。图片（<img>）默认就是 inline，所以也能被 text-align:center 居中。
- 对
<p>、<h1>这类块级标签里的文字有效 - 对
<span>、<button>（默认inline-block）有效 - 对
<img>有效，但前提是它没被设成display: block - 对
<div>子元素无效，除非你先把它改成display: inline-block
为什么给父容器设 text-align:center 后，子 div 还是靠左？
因为 <div> 默认是块级元素，text-align 对它不起作用。这时候看到的“没居中”，其实是正常行为，不是 bug。
解决方法只有两个方向：
立即学习“前端免费学习笔记（深入）”；
- 把子
<div>改成display: inline-block，它就变成行内块，能响应text-align - 或者放弃
text-align，改用margin: 0 auto（需有明确宽度）或display: flex
注意：inline-block 元素之间会留空格（换行符/空白符），可能造成意外间隙；加 font-size: 0 到父元素可临时规避，但要记得在子元素里重设字体大小。
justify 值在实际项目中容易出什么问题？
text-align: justify 看似好用，但真实排版中常带来不可控的视觉干扰。
- 浏览器对单词间距、字母间距的拉伸策略不一致，Chrome 和 Safari 渲染结果可能明显不同
- 中文段落几乎无效果（缺少空格分隔），强行启用只会让最后一行两端留白，看起来像漏了字
- 如果同时设置了
letter-spacing或word-spacing，justify可能完全失效 - 移动端小屏下，短行 + justify 容易导致字间距爆炸，阅读体验变差
真要用两端对齐，建议搭配 hyphens: auto（需语言属性支持）和 text-justify: inter-word（仅部分浏览器支持），但兼容性仍有限。
text-align 继承性和 direction 的隐含影响
text-align 是继承属性，子元素默认沿用父级设置。但它的“默认值”依赖 direction：LTR（如中文、英文）下默认 left，RTL（如阿拉伯语）下默认 right。
- 如果父元素设了
direction: rtl，又没显式写text-align，子元素会右对齐 -
inherit值在 IE8 及更早版本完全不支持，别用 - 想强制统一行为，不要依赖默认值，始终显式声明
text-align: left或center
最常被忽略的是：当嵌套多层 inline-block 容器时，每一层的 text-align 都会影响其直接子内容，而不是最终渲染结果——调试时得一层层查，不能只看最外层。
