不同浏览器默认样式差异导致居中失效，根本原因是margin、line-height、vertical-align等值不一致；需重置默认样式、明确width、用flex替代传统方案，并借助DevTools验证实际计算值。
不同浏览器默认样式直接影响居中效果，根本原因不是“居中写法错了”，而是 margin、line-height、vertical-align 这些值在 Chrome、Firefox、Safari 甚至旧版 IE 里压根就不一样——比如 <p> 在 Chrome 默认有 margin-top: 1em，Firefox 可能是 1.12em，IE6 直接为 0，一加一减，视觉上就偏了。
为什么 margin: 0 auto 有时不居中？
常见错误是给一个没设 width 的块级元素直接写 margin: 0 auto，它确实不生效——但更隐蔽的问题是：父容器的 padding 或子元素的默认 margin 被浏览器各自渲染出不同值，导致“看起来居中了”，实际左右留白不等。
- 必须确保父容器没有意外的
padding（尤其body默认有8px） - 子元素如果是
<h1>、<p>等，默认margin不统一，得先重置 -
margin: 0 auto只对非浮动、非绝对定位、有明确width的块级元素起作用
行内元素垂直对不齐，vertical-align: middle 为啥无效？
因为 vertical-align 是相对于“行框（line box）”的基线对齐，而不同浏览器对 input、img、文字的基线定义不同。比如 IE6–7 中 <img> 默认带 3px 下间隙，Chrome 则按字体度量算基线。
- 统一方案：给所有参与对齐的元素加
vertical-align: top或middle，且确保父容器font-size: 0（防幽灵空白干扰） - 更稳做法：用
display: flex替代行内布局，align-items: center不依赖基线 - 特别注意
<button>和<input type="text">，它们在 Firefox 中默认line-height比 Chrome 高，需显式设为normal或具体数值
用 normalize.css 前后居中行为怎么变？
加了 normalize.css 后，<h1> 的 margin、<button> 的 padding、<textarea> 的 vertical-align 都被校准过，但你的旧居中代码可能反而失效——比如原来靠 line-height 撑高的文本居中，在 normalize 后因 line-height 被重设而错位。
立即学习“前端免费学习笔记（深入）”；
- 务必把
normalize.css放在所有自定义 CSS 之前，否则它的重置规则会被覆盖 - 不要和
* { margin: 0; padding: 0; }混用，后者会干掉normalize.css保留的语义化默认（如列表符号、表单可访问性间距） - 居中逻辑要重新验证：特别是
text-align: center对<span>+<img>组合，normalize 后img默认vertical-align: initial（通常是baseline），仍需手动调
真正难处理的不是“怎么居中”，而是“为什么这次居中了，换个浏览器或换了个父容器字号就偏了”。关键在于把默认样式差异当作变量来控制，而不是当成 bug 来修补——每次写居中前，先看一眼 DevTools 里 Computed 标签页里真实的 margin、padding、line-height 值，比猜浏览器行为靠谱得多。
