flex居中方案最稳：父容器设display: flex、justify-content: center、align-items: center和min-height: 100vh；margin: 0 auto仅水平居中且需width明确及非flex/grid父容器。
直接用 display: flex + justify-content: center + align-items: center，父容器加 min-height: 100vh，基本就稳了。其他方案要么要算偏移、要么受上下文干扰大，容易白忙活。
为什么 margin: 0 auto 不总管用
它只负责水平居中，且依赖两个前提：width 或 max-width 明确设置，以及父容器不能是 flex 或 grid 布局——否则会覆盖掉 margin: auto 行为。常见踩坑点：
- 写了
width: 100%—— 没剩余空间可分，auto失效 - 父容器用了
display: flex，却还指望margin: 0 auto垂直居中 - 给
<form></form>加了float或position: absolute，外边距直接不生效
flex 居中必须配 min-height: 100vh
align-items: center 要起作用，父容器得有高度支撑垂直方向的对齐。只写 height: 100% 往往没用，因为它的百分比高度依赖父级高度，而 或 默认没显式高度。稳妥写法是：
.login-wrapper {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
注意：<form></form> 自身不用设 width，但建议加 max-width: 400px 防止在大屏上过宽。
absolute 居中时 transform 缺一不可
当登录框需要脱离文档流（比如浮在遮罩层上），position: absolute 是合理选择，但仅靠 left: 50% 和 top: 50% 会让元素左上角落到中心，整体偏右下。必须补上：
- 父容器设
position: relative（或absolute/fixed）提供定位上下文 -
<form></form>加position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%)
这个组合对宽高未知的表单也有效，但要注意滚动时定位可能失稳，且可访问性略弱于 flex 方案。
真正卡住人的往往不是“怎么写”，而是“为什么没生效”——布局上下文冲突、元素类型误判（比如把行内元素当块级处理）、或定位参考缺失（absolute 没配 relative 父容器），这些比代码本身更值得先排查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
