margin: 0 auto 水平居中需满足：元素为块级、显式设置固定或小于父容器的宽度（不能是auto或100%）、父容器有明确宽度，且元素未脱离文档流（无float/absolute）。
用 margin: auto 居中需要满足什么条件？
直接写 margin: auto 对登录框没反应，不是写法错了，是缺了前提：该元素必须是块级元素，且**宽度不能是 auto（即不能占满父容器）**。浏览器只有知道左右剩余空间多少，才能把“自动”算出来。
常见错误是给 <form> 或 <div class="login"> 直接加 margin: auto，但忘了设 width，结果它还是 100% 宽，左右没空隙，auto 就失效了。
- 必须显式设置
width（比如width: 320px或width: 400px） - 确保它是块级元素（
<div>、<form>默认就是，<span>则需加display: block） - 父容器要有明确宽度（通常
<body>或外层<div>是 100% 宽，没问题）
为什么只设 margin: 0 auto 而不是 margin: auto？
margin: auto 会同时作用于上、右、下、左四个方向，导致垂直方向也“自动”，但块级元素的上下 auto 在常规文档流里不触发居中（它不会把元素往上顶），反而可能因默认 margin-top 消失而让登录框贴顶，视觉上更偏上。
所以实际只靠水平居中，写成 margin: 0 auto 更稳妥——上/下为 0，左右交给 auto 算。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
margin: auto→ 可能丢失顶部间距，且无垂直居中效果 - 正确写法：
margin: 0 auto→ 明确控制，行为可预期 - 若还需垂直居中，得配合
flex或position，单靠外边距做不到
遇到父容器有 padding 或 border 怎么办？
如果外层容器（比如 <body> 或某个 <div>）设置了 padding，margin: 0 auto 仍有效，因为它是相对于父容器的 content box 计算的；但若父容器有 border 且你希望登录框视觉上“真正居中”，就得注意 border 本身占空间，可能让整体看起来略偏。
- 安全做法：给父容器加
box-sizing: border-box，确保 width 包含 border 和 padding - 更推荐：把登录框包在干净的
<div>里，该 div 设width: 100%、box-sizing: border-box，再让登录框在其内margin: 0 auto - 避免在父容器上直接设大
padding后又依赖margin: 0 auto做精确对齐
兼容性与现代替代方案提醒
margin: 0 auto 居中在所有浏览器里都支持，包括 IE8+，非常可靠。但它只解决水平居中；如果你顺手试了 margin: auto 发现没垂直效果，不是你手误，是它本来就不负责那个事。
现在更常见的登录框布局其实是用 display: flex，父容器加 justify-content: center（水平）和 align-items: center（垂直），但那是另一套逻辑——外边距方案简单、轻量、无副作用，只要记住宽度 + 0 auto 这两个硬条件，就稳了。
容易被忽略的是：居中效果是否真被“看见”，取决于你有没有意外给登录框加了浮动（float）、绝对定位（position: absolute），或者父容器用了 text-align: center 干扰了块级行为——这些都会让 margin: 0 auto 失效，查问题时优先看这几个地方。
