用 flex 居中需三步：父容器设 min-height: 100vh、display: flex、深色背景；margin: 0 auto 仅水平居中且依赖显式宽度与非 flex 父容器，无法垂直居中。
用 display: flex + justify-content: center + align-items: center，父容器加 min-height: 100vh，再配个深色背景——三步到位，不依赖宽高、不抖动、不卡顿。
为什么不能只靠 margin: 0 auto
它只管水平居中，且必须满足两个硬条件：width 或 max-width 明确设置，且父容器不能是 flex 或 grid。暗色背景常由 或全屏 <div> 承载，一旦你给它加了 <code>display: flex，margin: 0 auto 就直接失效。更别说垂直方向，它压根不处理。
- 写了
width: 100%→ 没剩余空间可分，auto归零 - 父容器用了
background-color: #121212但没设高度 →align-items: center无处发力 - 给
<form></form>加了position: absolute→ 外边距彻底失能
flex 居中必须配 min-height: 100vh
align-items: center 是垂直对齐，但它需要父容器在纵轴上有“可对齐的空间”。只写 height: 100% 往往无效，因为百分比高度会一直向上找有显式高度的祖先，而 和 默认没设高度。用 min-height: 100vh 是最直接的解法——它不依赖父级，强制撑满视口高度。
- 别用
height: 100vh：滚动时可能遮挡内容，min-height更安全 - 父容器可以是
，但需先清掉默认margin：body { margin: 0; } - 暗色背景直接写在 flex 父容器上，比如
background-color: #1a1a1a
表单自身要不要设宽度？
要，但用 max-width 而非 width。登录框太宽在小屏上会溢出，太窄又浪费空间。max-width: 480px 是兼顾移动端与桌面端的常见选择，配合 width: 100% 可自动收缩。
-
<form></form>不用设margin，flex 已接管居中逻辑 - 加
padding防边缘紧贴，比如padding: 2rem - 如果用圆角+阴影增强暗色氛围，记得加
border-radius和box-shadow，别漏掉overflow: hidden防阴影裁切
真正容易被忽略的是：暗色模式下，输入框的 outline 和聚焦态颜色经常和背景融成一片，用户根本看不出是否获得焦点。务必检查 :focus 样式，比如加个鲜明的 outline: 2px solid #4caf50 或改用 box-shadow 替代。
