最可靠方案是父容器设display: flex、justify-content: center、align-items: center并确保height: 100vh且无margin/padding干扰；IE9需用绝对定位+负margin；Grid方案需注意place-items兼容性；内部控件需统一box-sizing和vertical-align。
用 Flex 布局让登录表单在页面中垂直+水平居中
最可靠、兼容性够用（Chrome 29+/Firefox 20+/Safari 6.1+）、代码量最少的方案就是 display: flex。关键不是“怎么写”，而是父容器必须撑满视口高度，且不能被其他样式干扰。
常见错误现象：justify-content: center 和 align-items: center 写了但没效果——大概率是父容器没设 height: 100vh，或者外层有默认 margin 或 padding 挤压了可用空间。
- 给
<body>或直接包裹表单的容器加margin: 0和height: 100vh - 确保该容器设
display: flex、justify-content: center、align-items: center - 表单本身不需要设宽高，但建议加
max-width: 400px防止在大屏上过宽
不支持 Flex 的老浏览器（如 IE10 及以下）怎么办
IE10 支持 display: -ms-flexbox，但写法略有不同；IE9 及以下只能退回到绝对定位 + 负 margin 方案。这个方案现在基本只用于遗留系统维护。
核心思路：父容器设 position: relative，表单设 position: absolute + top: 50% + left: 50%，再用 transform: translate(-50%, -50%) 回拉自身宽高的一半。
立即学习“前端免费学习笔记（深入）”；
- 必须加
transform，只靠top/left无法真正居中（因为是基于左上角定位） - IE9 不支持
transform，得用margin-left和margin-top手动计算负值，比如表单宽 320px 就写margin-left: -160px - 如果表单宽高不固定，IE9 下几乎无法优雅实现居中
用 CSS Grid 实现居中的注意事项
display: grid 是目前最语义清晰的方案，但要注意浏览器支持范围（Chrome 57+/Firefox 52+/Safari 10.1+），移动端 iOS Safari 10.3+ 才稳定支持 place-items。
最简写法是父容器设 display: grid 和 place-items: center，等价于 justify-items: center + align-items: center。但别忘了同样要保证父容器占满视口。
- 如果父容器里除了表单还有别的元素，
place-items会影响所有子项，此时应改用grid-template-areas或显式设置justify-self/align-self - 某些旧版 Safari 对
place-items解析异常，可降级为justify-content: center; align-content: center（需确认容器是单行网格） - Grid 在响应式场景下比 Flex 更易控制行列分布，比如想让标题和表单错开对齐时更灵活
表单内部元素（输入框、按钮）对齐容易被忽略的细节
外部居中做完，内部常出现输入框宽度不一致、按钮下沉、文字垂直偏移等问题。根源往往是表单控件默认 box-sizing 和 line-height 不统一。
典型错误：<input type="text"> 和 <button> 在不同浏览器中默认高度差 2–4px，尤其在设置了 font-size: 16px 后更明显。
- 全局重置：给
input、select、textarea、button统一设box-sizing: border-box和vertical-align: middle - 避免只设
height，优先用padding控制控件高度，配合line-height居中文本 - 如果用了
flex布局内部元素，注意align-items: center对input的基线对齐可能失效，此时加margin-top: 0.25em微调更稳妥
100vh 就能闭环。真正麻烦的是嵌套在已有布局（比如带侧边栏的管理后台）里的登录框——这时居中逻辑要从最近的相对定位祖先算起，而不是整个视口。 
