margin: 0 auto 实现登录框水平居中最直接，需确保表单为块级元素、设明确宽度或 max-width（如 max-width: 480px），且父容器不能是 flex 或 grid；设 width: 100% 会导致失效，因无剩余空间可分。
用 margin: 0 auto 实现登录框水平居中
这是最直接、兼容性最好的方式，适合大多数静态登录页。关键不是“加居中”，而是“让浏览器有空间可分”。
-
form或包裹它的div.login-box必须是块级元素（默认就是），且必须设明确宽度或max-width，比如max-width: 480px - 写
margin: 0 auto时，如果父容器是display: flex或display: grid，这个声明会被忽略——flex/grid 的子项不响应margin: auto水平居中逻辑 - 常见错误：设了
width: 100%还想margin: 0 auto，结果没效果。因为 100% 已占满，左右没剩余空间，auto就变成 0 - 推荐搭配
text-align: center在父容器上，这样里面的button、label等行内内容也会水平居中，但注意别影响input的对齐（它默认是display: inline-block，不受text-align影响）
用 display: flex 同时实现水平+垂直居中
当登录框需要在视口中央（比如全屏登录页），flex 是首选。它不依赖子元素尺寸，也不用手算偏移量。
- 给
body或一个全高包裹容器加display: flex; justify-content: center; align-items: center; min-height: 100vh -
min-height: 100vh是必须的——没有高度，align-items: center就没参考基准；用height: 100vh有可能导致内容被截断，min-height更安全 -
form自身不用设width，但建议加max-width防止在大屏上过宽；也不用设margin，flex 会接管对齐 - 如果页面已有其他内容（比如顶部导航栏），别把
flex直接加在body上，否则整个页面布局会错乱。应该用一个独立的div.login-container作为 flex 容器
用 position: absolute + transform 居中（适用于模态层）
当登录框要浮在遮罩层上、脱离文档流时，绝对定位是合理选择。但只写 left: 50%; top: 50% 会偏移——它以左上角为锚点，不是中心。
- 父容器（比如
div.overlay）必须有position: relative（或absolute/fixed），否则定位参考是视口 - 子元素（
form或div.login-box）设position: absolute; left: 50%; top: 50%，再补一句transform: translate(-50%, -50%) - 这个组合对宽高未知的表单也有效，但要注意滚动时定位是否稳定——如果父容器可滚动且没设
position: relative，top: 50%仍按视口计算，滚动后会“飘走” - 别漏掉
transform。见过太多人只写前两行，结果登录框总卡在右下角，还以为是 CSS 优先级问题
为什么 text-align: center 对登录框本身无效
新手常误以为给 form 加 text-align: center 就能让整个表单居中，其实它只作用于内部的行内/行内块元素，对 form 自身这个块级容器毫无影响。
立即学习“前端免费学习笔记（深入）”；
-
text-align控制的是“内容对齐”，不是“容器定位”。它会让label文字、button、span水平居中，但不会移动form的位置 - 如果你发现输入框没居中，大概率是
input被设成了display: block，而block元素不响应text-align。此时要么改input为inline-block，要么换用margin: 0 auto或flex - 真正该加
text-align: center的地方，是form的父容器（比如div.login-container），用来统一控制按钮和提示文字的位置
flex 方案最省心，但得确认 IE11 是否需支持；margin: 0 auto 最稳妥，但垂直居中要额外处理；绝对定位看着灵活，一不小心就和滚动、响应式打架。选哪个，取决于你此刻面对的是什么容器、有没有其他 DOM 干扰、以及要不要支持老浏览器。 
