CSS项目实战之垂直居中的登录框_各种居中方案的实战对比

登录框垂直居中首选display: flex，需父容器设min-height: 100vh且子元素非absolute；兼容ie8–9用table-cell；动态尺寸用absolute+transform；grid方案简洁但需注意浏览器支持。

登录框垂直居中，首选 display: flex

现代项目里，登录框垂直居中直接用 flex 最省心。它不挑子元素宽高，不依赖父容器是否设高度，也不用算偏移量。

• 父容器加 display: flex; align-items: center; justify-content: center;，一行代码搞定双向居中
• 必须确保父容器有明确高度（比如 min-height: 100vh），否则 align-items: center 没效果
• IE10 及以下不支持——如果还要兼容 IE9，就得换方案
• 注意：子元素不能是 position: absolute，否则会脱离 flex 流，居中失效

老系统要兼容 IE8–IE9，用 display: table-cell

当项目还跑在政务内网或银行旧系统上，table-cell 是唯一能稳住的方案，连 IE8 都没问题。

• 父容器设 display: table; height: 100vh; width: 100%;，再套一层 display: table-cell; vertical-align: middle; 的中间层
• 子元素（登录框）必须是 display: inline-block 或 inline，否则 vertical-align 不生效
• 语义混乱、dom 层级多一层，但胜在“改完就跑，不报错”
• 别忘了给父容器设 text-align: center，不然水平方向不会居中

宽高未知又得精确定位？position: absolute + transform 是底线

比如登录框由 js 动态插入、尺寸随语言切换变化，或者用了 css-in-JS 导致样式不可预知——这时候只能靠定位+位移。

• 父容器必须是 position: relative 或其他非 Static 定位，否则 top: 50% 会相对于视口计算
• 子元素写 position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
• 不要用 margin-top: -XXpx，一改尺寸就要同步改负边距，维护成本高
• 移动端 safari 旧版对 transform 的渲染偶尔有微小偏移，可加 will-change: transform 缓解

Grid 方案不是噱头，但要注意浏览器实际支持范围

place-items: center 看起来像魔法，但它在真实项目中落地，得看构建工具和目标用户。

立即学习“前端免费学习笔记（深入）”；

• chrome 66+、firefox 63+、Safari 12.1+、edge 79+ 全支持；IE 完全不支持
• 只需父容器一句 display: grid; place-items: center;，比 flex 还少敲两个词
• 如果项目已用 postcss 并配置了 autoprefixer，它不会自动补 grid 的兼容写法——因为真没法补
• 慎用于低版本安卓 webview（如 android 4.4 内置浏览器），那里 grid 是摆设

真正容易被忽略的，是父容器的“高度来源”。无论用哪种方案，如果父容器高度由内容撑开，height: auto 下的垂直居中基本都无效——这不是方法错了，是布局前提没满足。