登录表单水平居中首选margin: 0 auto，需卡片容器为普通块级流、表单设明确width/max-width；若卡片用flex布局，则应改用justify-content: center或align-self: center。
登录表单在卡片容器内水平居中用 margin: 0 auto
只要卡片容器是普通块级流（非 flex 或 grid），且登录表单设了明确宽度，margin: 0 auto 就是最直接有效的解法。
-
<form></form>默认是块级元素，无需额外设display: block - 必须显式设置
width或max-width（比如max-width: 400px），否则没有“剩余空间”可分配，auto失效 - 常见错误：给卡片容器加了
display: flex，结果margin: 0 auto完全不生效——因为 flex 子项的margin: auto行为被覆盖了 - 如果卡片内还有其他内容（如标题、提示文字），建议把
<form></form>单独包一层<div class="form-wrapper">，避免样式污染 <h3>卡片容器本身用 <code>flex居中登录表单更可控当卡片需要响应式缩放、或内部有多个子元素（标题+表单+按钮组）时，把卡片容器设为
display: flex，再让<form></form>成为它的子项，逻辑更清晰。- 卡片容器加
display: flex+flex-direction: column，再对<form></form>设align-self: center，就能只让它水平居中，不影响其他子项流式排列 - 若要整个表单区域（含 label 和 input）也垂直居中，可加
justify-content: center，但需确保卡片容器有高度（如min-height: 300px） -
align-items: center会让所有子项都水平居中，容易误伤<label></label>的左对齐需求——此时应改用text-align: center控制内部行内容，而非靠 flex 对齐
text-align: center只对表单内行内元素有效别指望给卡片容器加
text-align: center就能让<form></form>居中——它只影响行内级内容（<span></span>、<input>、<button></button>等），对块级<form></form>没作用。- 但它确实能让表单里的按钮、输入框标签、提示文字统一水平居中
- 若
<input>被设成display: block（常见于重置样式），那它就不再响应text-align，得单独处理：要么改回inline-block，要么用 flex 包裹每组<label>+<input></label> - 注意：
text-align: center在flex或grid容器里会被忽略，优先级低于布局规则
绝对定位不是首选，除非卡片要悬浮或遮罩
只有当登录卡片需要脱离文档流（比如作为模态框浮在页面上方），才考虑
position: absolute。日常卡片布局中硬套这套，反而增加维护成本和可访问性风险。- 必须给卡片容器设
position: relative，否则top: 50%会相对于视口定位 -
left: 50%+transform: translate(-50%, -50%)缺一不可；漏掉transform，表单左上角会卡在中心点 - 如果卡片内容高度动态（比如密码强度提示展开），
top: 50%不再准确，而flex或margin: 0 auto仍能自适应
flex？有没有设height或min-height？这些细节一旦错位，所有居中尝试都会静默失效。 - 卡片容器加
