父容器必须设min-height: 100vh并启用display: flex、justify-content: center和align-items: center，仅对登录框自身设置居中属性无效；需清除body默认margin，统一box-sizing: border-box，并用max-width+width: 100%实现响应式宽高。
父容器必须设 min-height: 100vh 并启用 Flex
只给登录框加 justify-content: center 或 align-items: center 完全无效——这些属性只对 flex 容器本身起作用，而登录框（<form>）默认不是 flex 容器。真正要动的是它的**父容器**，通常是 <body> 或一个外层 <div class="container">。
常见错误是只写 height: 100vh，但若页面内容超出视口，这个高度会截断；用 min-height: 100vh 更稳妥。
<body style="margin: 0; min-height: 100vh; display: flex; justify-content: center; align-items: center;">- 别忘了清除
body默认margin，否则顶部/左右可能留白 - 如果用了自定义容器（比如
<div id="app">），确保它也继承了全高：加height: 100%或直接设min-height: 100vh
box-sizing: border-box 是表单控件居中的隐形前提
登录框看起来“偏左”或输入框/按钮不对齐，大概率不是居中逻辑错了，而是 input 和 button 的盒模型没统一。默认 box-sizing: content-box 下，width: 100% + padding 会让实际宽度溢出，破坏居中视觉。
- 给所有表单控件统一加：
input, select, button { box-sizing: border-box; } - 登录框容器自身也建议加：
.login-box { box-sizing: border-box; } - 避免在
input上同时设width: 100%和padding却不配box-sizing，否则窄屏下容易横向滚动
宽高响应式不能靠猜，max-width + width: 100% 才真自适应
登录框不是越宽越好，也不是固定 400px 就完事。大屏下过宽分散注意力，小屏下又不能溢出。关键在组合策略：
立即学习“前端免费学习笔记（深入）”；
- 登录框容器设：
max-width: 480px; width: 100%;—— 窄屏占满，宽屏停在 480px - 不要设
height，让它由内部input、button自然撑开；强行设高会导致文字被裁或留白异常 - 移动端必须加
<meta name="viewport" content="width=device-width, initial-scale=1">，否则100vh在 iOS Safari 下可能失效
别在 <td> 或 <tr> 上硬套 Flex 居中
如果你的登录框意外嵌在 HTML 表格里（比如旧系统改造），千万别试图给 <tr> 加 display: flex。表格元素有独立渲染模型，display: flex 会破坏列宽计算、响应式断点甚至导致 IE11 下高度塌陷。
- 真要用 Flex 对齐单元格内容，只改
<td>：<td style="display: flex; align-items: center; justify-content: center;"> - 同时补
min-height: 48px（或类似值），否则align-items: center缺少交叉轴参考长度，会“悬空” - 更干净的做法：把登录框从表格结构里彻底移出来，用语义化
<div>包裹
最常被忽略的一点：居中不是样式写完就结束，而是要验证它在不同设备、不同缩放比例、不同输入法弹出状态下的表现。尤其是 iOS 键盘弹起时，100vh 可能被重算，此时 min-height: 100dvh（动态视口单位）比 100vh 更稳，但需注意兼容性。
