用 margin: 0 auto 实现表单水平居中需设明确宽度（如 max-width: 480px），父容器不能是 flex/grid，且不能加 float 或 absolute；flex 布局（justify-content + align-items）更可靠；absolute + transform(-50%,-50%) 适合脱离流场景；text-align:center 仅影响行内内容，不作用于块级表单。
用 margin: 0 auto 实现表单水平居中，但必须设宽度
表单默认是块级元素，margin: 0 auto 能让它在父容器里水平居中——前提是它有明确的宽度（不能是 width: 100% 或没设宽度）。常见错误是写了 margin: 0 auto 却没加 width 或用了 width: 100%，这时左右没剩余空间可分，auto 就失效了。
推荐用 max-width 替代 width，比如：max-width: 480px。这样既保证小屏下不溢出，又让大屏时能居中。
- 父容器不能是
display: flex或display: grid，否则会覆盖margin: auto行为 - 别给
<form>加float或position: absolute，这些会让margin: 0 auto失效 - 如果父容器是
<body>，记得确认html和body没被意外设了height: 100%导致内容区高度塌陷
用 Flex 布局实现水平+垂直居中，最省心也最可靠
要让登录框在视口里上下左右都居中（比如全屏登录页或模态弹窗），display: flex 是首选方案。它不依赖子元素尺寸，也不用算像素，兼容性从 Chrome 29 / Firefox 20 / Safari 6.1 开始就稳定支持。
关键三步：父容器设 display: flex、justify-content: center、align-items: center；再确保父容器有足够高度，常用 min-height: 100vh。
立即学习“前端免费学习笔记（深入）”；
-
<form>自身不用设width，但建议加max-width防止过宽 - 如果父容器是
<body>，注意移除默认margin（比如加body { margin: 0 }） - 避免在父容器上同时写
text-align: center，它对块级子元素无效，还可能干扰内联元素排版
用 position: absolute + transform 居中，适合脱离文档流场景
当登录框需要盖在遮罩层上、或需固定定位时，position: absolute 合理，但只写 left: 50% 和 top: 50% 会导致框偏右下角——因为定位基准点是左上角，不是中心。
必须补上 transform: translate(-50%, -50%)，把自身宽高的一半“挪回来”。这个组合对宽高未知的表单也有效。
- 子元素（即登录框）要设
position: absolute - 父容器必须有定位上下文，比如
position: relative（否则参考的是视口） - 滚动页面时，
position: absolute的元素不会随滚动而动，这点和fixed不同，要注意交互反馈是否符合预期
别混淆文本居中和块居中，text-align: center 只作用于行内内容
text-align: center 是给父容器写的，它只影响内部的行内级元素（如 <label>、<button>、文字），对 <form> 这类块级元素完全无效。有人给 <form> 直接加 text-align: center，结果按钮是居中了，但整个表单还在左边，这就是典型误用。
想让按钮居中：给它的直接父容器（比如一个 <div class="form-actions">）设 text-align: center；想让所有输入框标签文字水平居中，同样在它们共同的父容器上设该属性即可。
- 若需控制
<label>和<input>的垂直对齐，得用vertical-align或把它们包进 Flex 容器 - 不要在
<form>上同时叠加margin: 0 auto和text-align: center，意图混乱且易引发意外交互
