根本原因是盒模型和定位逻辑未对齐，需统一box-sizing、明确容器结构、规范表单嵌套与语义标记，并正确设置vertical-align、字体、label绑定及autocomplete属性。
为什么登录框总“撑出容器”或“居中失效”
根本原因不是 CSS 写得不够多，而是盒模型和定位逻辑没对齐。常见现象包括：input 宽度超出父容器、form 在页面中偏左/偏上、边框只包住文字不包住输入框。这些问题 90% 出在没统一 box-sizing 或容器结构缺失。
- 漏掉全局重置：
* { box-sizing: border-box; }—— 没它，width: 100%+padding: 12px+border: 1px就会溢出 - 用
position: absolute居中却没配top/left+transform: translate(-50%, -50%)，结果依赖屏幕尺寸偏移 - 外层容器没明确 ID 或 class，比如写了个
#box样式但 HTML 里是<div id="">（空 ID 无效）或根本没这个元素<h3>如何用纯 HTML+CSS 实现稳定居中+完整包裹</h3> <p>关键不是“怎么居中”，而是“谁来当容器”。必须有一个明确的视觉包裹元素，且所有表单控件都嵌套其中。</p> <ul> <li>外层容器用 <code><div id="login-box">或<div class="login-container">，别用空id=""或重复id="Center" - 容器内直接放
<form>，不要跳级嵌套；form不是容器，它只是提交语义载体 - 居中推荐用
margin: 100px auto;+width（适合固定宽），或display: flex; justify-content: center; align-items: center; min-height: 100vh;（更稳，适配弹窗/全屏） - 边框加在容器上，不是
form上——#login-box { border: 1px solid #ccc; padding: 24px; }
表单内部对齐错位的三个硬性条件
按钮下沉、输入框高度不一致、文字垂直偏移，不是“看起来差不多”，而是浏览器默认行为未覆盖。
- 所有
input和button必须设vertical-align: middle;（默认是baseline，导致按钮下坠） - 统一字体：至少
font-size: 16px; line-height: 1.5;，否则不同元素行高计算不一致，高度就乱 - 避免给
form设display: flex后不设flex-direction: column和gap，用gap: 12px替代margin-bottom，防止键盘弹起时遮挡按钮
placeholder 和 label 的分工不能混
很多人把 placeholder 当成 label 用，结果可访问性崩盘、移动端点不准、表单验证失效。
立即学习“前端免费学习笔记（深入）”；
-
placeholder="请输入账号"只是提示文字，不替代<label for="username">账号</label> -
label必须绑定input的id，不是name；for="username"对应id="username" - 别写
<label>账号<input></label>，Safari 旧版聚焦不稳定；也别省略id，哪怕和name一样 -
autocomplete要写准：autocomplete="username"和autocomplete="current-password"，不是"off"或"new-password"
实际布局中最容易被忽略的，是容器元素的语义存在感——它必须真实存在于 DOM 中、有明确 ID/class、且所有子元素严格嵌套其内。样式再细，结构空了就全白搭。
