text-align: center必须作用于父容器，用于居中其内部的行内或inline-block元素；对块级元素无效，且不能替代margin: 0 auto实现元素自身居中。
text-align: center 只作用于父容器，不是给子元素加
行内块级元素（比如 display: inline-block 的 div 或 img）本身不占满父容器宽度，但它的居中逻辑和纯行内元素一致：靠父容器的 text-align: center 控制，而不是自己设 margin: 0 auto。
常见错误是给子元素自己加 text-align: center，或者试图用 margin: 0 auto —— 这两种写法对 inline-block 都无效，因为前者只影响子元素内部内容，后者只对块级元素生效。
- 必须在父容器上设置
text-align: center - 子元素保持
display: inline-block（或默认就是inline，如span、img） - 子元素可以设
width: 50%、max-width: 80%等百分比值，不影响居中逻辑 - 注意父容器要有足够宽度（比如没被浮动塌陷、没设
width: 0），否则text-align没空间可居中
inline-block 元素间有空白间隙，会影响视觉居中
HTML 中换行符和空格会被渲染成一个空白字符，导致多个 inline-block 元素之间出现约 4px 的不可见间隙。当父容器 text-align: center 时，这个间隙会让整体“重心”偏移，看起来没真居中。
这不是居中失效，而是布局干扰。尤其在设了百分比宽度后，间隙占比更明显。
- 解决方法一：父容器设
font-size: 0，子元素再单独设正常font-size - 解决方法二：子元素标签写成紧挨着（
<div></div> <div></div>），去掉换行和空格 - 解决方法三：用
flex替代inline-block，彻底规避间隙问题
百分比宽度 + margin: 0 auto 不起作用，别试了
margin: 0 auto 对 inline-block 元素完全无效，哪怕你强行加了 width: 60% 也一样。浏览器不会为行内级元素计算左右自动外边距。
有人误以为“只要设了宽度就能用 margin: 0 auto”，这是把块级元素规则套错了对象。
-
margin: 0 auto只对display: block或display: table等块盒生效 -
inline-block是行内级盒子，它遵循行内布局流，margin可设但不触发自动计算 - 如果真想用
margin: 0 auto，得先改display: block，再配合固定/百分比宽度（但此时就不再是行内块行为）
现代项目建议直接用 Flex 替代 inline-block
如果你的场景是多个等宽/百分比宽的卡片、按钮或图片需要水平居中排列，inline-block 加 text-align 是兼容方案，但维护成本高、间隙难控。
Flex 布局能天然解决宽度自适应 + 居中 + 间隙控制，且不用操心父容器是否塌陷、字体大小是否归零。
- 父容器设
display: flex和justify-content: center - 子元素保留
width: 50%或其他百分比，无需inline-block - 间隙用
gap显式控制，比 hack 空白字符干净得多 - IE11 对
flex的justify-content有兼容性问题，若需支持，得加-ms-前缀并测试
百分比宽度本身没问题，关键是谁来“管”它居中——行内级元素永远靠父容器的 text-align，块级元素才轮到自己用 margin: 0 auto。混淆这两层归属，是绝大多数居中失败的根源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
