flex布局垂直居中需父容器设height或min-height，否则align-items: center无效；推荐用100vh或min-height: 100vh；绝对定位+transform最灵活但需relative上下文；grid的place-items: center仅对直接子元素生效且要求display: grid。
Flex 布局居中必须设父容器高度
不设 height 或 min-height，align-items: center 就没效果——因为垂直方向没有参考基准。常见错误是只写 display: flex; justify-content: center; align-items: center;，但父容器靠内容撑开，结果元素只水平居中、垂直贴顶。
实操建议：
- 用
height: 100vh填满视口（适合全屏弹窗、登录页） - 用
min-height: 100vh更稳妥，允许内容超出时自然滚动 - 若父容器是
body，记得先清掉默认margin和padding，否则会留白错位
绝对定位 + transform 是唯一真“尺寸无关”方案
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); 不依赖子元素宽高，也不要求父容器有显式尺寸，但容易踩三个坑：
- 父容器必须是
position: relative（或absolute/fixed），否则定位上下文是body，可能偏移 - 该元素脱离文档流，后面兄弟元素会“上浮”，需额外处理布局间隙
- 在 IE9–IE11 中需加
-ms-transform前缀，但现代项目基本可忽略
Grid 的 place-items: center 看似简洁，实际有隐含条件
place-items: center 等价于 justify-items: center; align-items: center;，但它只对直接子元素生效，且父容器必须是网格容器（display: grid）。问题常出在：
- 父容器没设
height，导致网格轨道高度为 0，子元素被压缩到顶部 - 误以为它能作用于嵌套多层的子元素——不能，只管一级子项
- 和 Flex 混用时冲突：如果父容器同时设了
display: grid和display: flex，后者会被覆盖
伪类 + vertical-align: middle 仅适用于行内级场景
用 ::before 生成一个占满高度的空元素，再配合 vertical-align: middle 实现居中，本质是模拟表格单元格行为。但它只对 display: inline-block 元素有效，且：
- 父容器必须有明确高度（
height或min-height） - 子元素不能是块级，默认
div需加display: inline-block - 文字换行、图片加载延迟都可能导致短暂错位，不适合动态内容频繁变化的场景
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
