Flex居中需父容器设display:flex和min-height:100vh，同时用justify-content:center与align-items:center；form自身勿设width:100%或浮动，推荐max-width:480px+width:100%。
父容器必须设 display: flex 且有高度支撑
Flex 居中不是给 <form> 自己加样式，而是控制它的**直接父容器**。只写 justify-content: center 不生效，因为垂直居中依赖交叉轴（y 轴），而默认 flex-direction: row 下交叉轴是垂直方向——但前提是父容器得有高度可“对齐”。
常见错误是父容器没设高度，或者只写了 height: auto，导致 align-items: center 没空间可居中。
推荐写法：min-height: 100vh，既覆盖全屏又兼容内容撑高；若用 height: 100vh，需注意移动端地址栏缩放可能造成滚动条抖动。
justify-content 和 align-items 缺一不可
水平居中靠 justify-content: center，垂直居中靠 align-items: center，两者要同时存在。单独写其中一个，只能实现单向居中。
别误以为 margin: 0 auto 在 flex 容器里还起作用——它会被 flex 的对齐规则完全忽略。
如果登录框内部元素（比如 <input> 或 <button>）也想在表单内居中排列，不要给它们单独加 margin: auto，而是把表单自身也设为 display: flex，再用 flex-direction: column + align-items: center 控制子项。
表单本身别设 width: 100% 或浮动
<form> 默认是块级元素，flex 布局下它会自动收缩内容宽度，这是好事。但如果你手动加了 width: 100%，它就会撑满父容器，失去“被居中”的意义——它还在中间，只是看起来贴边了。
同样，加 float: left 或 position: absolute 会让它脱离 flex 流，直接失效。
更稳妥的做法是：给 <form> 加 max-width: 480px（兼顾小屏和大屏），再配 width: 100%，这样既能响应式，又不会过宽。
IE10+ 才支持，旧项目得兜底
Flexbox 在 IE10 开始支持，但 IE10/11 对 align-items: center 在某些嵌套场景下有渲染偏差，比如父容器用了 min-height 但未触发重排。
如果必须兼容 IE10+，建议加一句 height: 1px 或 line-height: 1px 强制触发渲染；
若要支持 IE9 及更早，flex 就不能用，得切回 position: absolute + transform: translate(-50%, -50%) 方案，但要注意可访问性（如屏幕阅读器可能跳过绝对定位内容）。
立即学习“前端免费学习笔记（深入）”；
实际最易忽略的点是：父容器是否真的“包裹”了表单——很多人把<body> 当成父容器直接加 flex，结果被浏览器默认 margin 或 padding 干扰，或者被其他 CSS 重置规则覆盖。动手前先用开发者工具检查 computed styles，确认 display: flex 和 min-height 确实生效，比猜更省时间。 
