用margin: 0 auto居中失效的常见原因：未设明确宽度（如max-width）、父容器为flex/grid、被设为float或position: absolute、误用text-align: center作用于自身。
form 元素用 margin: 0 auto 居中失效的常见原因
直接给 <form></form> 加 margin: 0 auto 却没居中？大概率是忘了设宽度或设错了。它只对块级元素生效，而 <form></form> 虽默认是块级，但若没明确 width 或 max-width，浏览器就无法计算“剩余空间”，auto 就没意义。
- 别写
width: 100%—— 宽度占满父容器，左右没空隙可分，margin: 0 auto彻底失效 - 推荐用
max-width: 480px，既保证小屏不溢出，又留出左右空间让auto生效 - 父容器不能是
display: flex或display: grid，否则会覆盖margin: auto行为 - 避免给
<form></form>加float或position: absolute，这两者会让margin: auto失效
全屏垂直+水平居中首选 display: flex
要让登录框在视口里真正“上下左右都居中”（比如全屏登录页），display: flex 是最稳、最不依赖尺寸的方案。它不要求你知道表单宽高，也不用算偏移量。
- 父容器（如
或一个包裹<form></form>的<div>）必须加：<code>display: flex、justify-content: center、align-items: center - 父容器要有高度支撑垂直居中，
min-height: 100vh是可靠选择 -
<form></form>自身不用设width，但建议加max-width防止过宽 - 如果父容器已有其他布局逻辑（比如用了
grid），别硬套flex，换用absolute + transform -
<form></form>设position: absolute; top: 50%; left: 50% - 它的父容器必须有定位上下文，即
position: relative（或absolute/fixed），否则参考的是视口 - 必须加
transform: translate(-50%, -50%)，把自身宽高的一半“挪回来” - 这个组合对宽高未知的表单也有效，但要注意滚动时定位可能漂移，需配合
position: fixed或监听 scroll - 想让按钮居中：给它的直接父容器（比如一个
<div>）设 <code>text-align: center - 想让所有
<label></label>和<input>水平居中排布：它们的父容器（如.input-group）用display: flex; justify-content: center -
text-align对vertical-align无效，垂直对齐要用flex或line-height配合
实际居中效果是否稳定，取决于你是否意识到：父容器的定位上下文、子元素的显示类型、以及是否混淆了“内容对齐”和“元素定位”这两个完全不同的 CSS 维度。
position: absolute 居中必须配 transform: translate(-50%, -50%)
当登录框需要脱离文档流（比如浮在遮罩层上），position: absolute 合理，但只写 top: 50%; left: 50% 会导致框的左上角落在中心点——结果整个框偏右下角。关键补丁就是 transform。
text-align: center 不等于表单居中
新手常误以为给 <form></form> 加 text-align: center 就能让整个表单居中，其实它只影响内部行内内容（如文字、<button></button>、<label></label>）的**水平对齐方式**，对 <form></form> 自身这个块级元素的位置毫无影响。
