Flex布局实现登录框真正居中需将body设为flex容器并设置height:100vh、justify-content:center、align-items:center，同时统一表单控件box-sizing:border-box并补充viewport响应式适配。
用 Flex 布局让登录框真正居中，不是靠猜 margin
直接改 margin: auto 或 text-align: center 很难让整个登录框在页面垂直+水平都居中，尤其当父容器没设高度时。Flex 是目前最稳、代码最少的解法。
关键不是“怎么写 CSS”，而是“把谁变成 Flex 容器”：必须让 <body> 或某个全高父容器开启 Flex，而不是只给登录框加样式。
- 确保父容器（比如
<body>或外层<div class="container">）设置了height: 100vh和display: flex - 加上
justify-content: center（水平）和align-items: center（垂直） - 登录框本身不需要设宽高，但建议加
max-width防止在大屏上过宽
<body style="margin: 0; height: 100vh; display: flex; justify-content: center; align-items: center;">
<form class="login-box">
<input type="text" placeholder="用户名">
<input type="password" placeholder="密码">
<button type="submit">登录</button>
</form>
</body>
登录框内容左右对齐不一致？检查 input 的 box-sizing
常见现象：输入框和按钮看起来没居中，左边空隙大、右边挤。大概率是 box-sizing 默认值导致的——padding 和 border 算在宽度之外，不同浏览器渲染有偏差。
- 统一给所有表单控件加
box-sizing: border-box - 避免用
width: 100%+padding组合，否则实际宽度超预期 - 如果用了
outline: none去掉焦点边框，记得补上border，否则某些浏览器下 focus 状态会塌陷
用 Grid 替代 Flex？可以，但要注意显式定义 grid-area
Grid 居中更“精确”，但容易误以为只要写 place-items: center 就完事。它只对直接子元素生效，且要求父容器是 display: grid。
立即学习“前端免费学习笔记（深入）”；
- 父容器需设
display: grid和min-height: 100vh（不能只用height: 100vh） - 登录框要作为直接子元素，不能套多一层无关
<div> - 如果页面后续要加 header/footer，Grid 更易扩展；纯居中场景 Flex 更轻量
移动端适配被忽略的三个点
PC 上居中了，手机一打开就偏左或溢出——问题常不在居中逻辑本身，而在响应式断点外的默认行为。
-
meta viewport标签漏了：<meta name="viewport" content="width=device-width, initial-scale=1"> - 登录框设了固定
width: 400px，没配max-width: 100%和width: 90%媒体查询 - 字体大小用
px写死，导致小屏上输入框文字溢出，间接破坏视觉居中感
居中只是第一步，真正的难点在“不同设备下看起来都像居中”。别只盯着 justify-content，得连同 viewport、box-sizing、响应式宽度一起调。
