父容器必须设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></form>）默认不是 flex 容器。真正要动的是它的**父容器**，通常是 或一个外层 <div class="container">。 <p>常见错误是只写 <code>height: 100vh，但若页面内容超出视口，这个高度会截断；用 min-height: 100vh 更稳妥。

• 别忘了清除 body 默认 margin，否则顶部/左右可能留白
• 如果用了自定义容器（比如 <div id="app">），确保它也继承了全高：加 <code>height: 100% 或直接设 min-height: 100vh

  box-sizing: border-box 是表单控件居中的隐形前提

  登录框看起来“偏左”或输入框/按钮不对齐，大概率不是居中逻辑错了，而是 input 和 button 的盒模型没统一。默认 box-sizing: content-box 下，width: 100% + padding 会让实际宽度溢出，破坏居中视觉。

  

  html-deploy

  使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

  下载
  • 给所有表单控件统一加：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> 或 <code><tr> 上硬套 Flex 居中 <p>如果你的登录框意外嵌在 HTML 表格里（比如旧系统改造），千万别试图给 <code><tr> 加 <code>display: flex。表格元素有独立渲染模型，display: flex 会破坏列宽计算、响应式断点甚至导致 IE11 下高度塌陷。

  • 真要用 Flex 对齐单元格内容，只改 <td>：<code><td style="display: flex; align-items: center; justify-content: center;"> <li>同时补 <code>min-height: 48px（或类似值），否则 align-items: center 缺少交叉轴参考长度，会“悬空”
  • 更干净的做法：把登录框从表格结构里彻底移出来，用语义化 <div> 包裹 <p>最常被忽略的一点：居中不是样式写完就结束，而是要验证它在不同设备、不同缩放比例、不同输入法弹出状态下的表现。尤其是 iOS 键盘弹起时，<code>100vh 可能被重算，此时 min-height: 100dvh（动态视口单位）比 100vh 更稳，但需注意兼容性。