块级元素垂直居中需父容器设 display: flex 和 align-items: center，并确保父容器有可计算高度（如 height: 100vh 或 min-height: 100vh），同时可加 justify-content: center 实现水平居中。
块级元素无法垂直居中，通常是因为父容器默认采用文档流布局（block formatting context），而 vertical-align、margin: auto 等传统方式对块级元素的垂直居中无效。最直接有效的解法是用 Flexbox 的 align-items 配合 display: flex。
确保父容器启用 Flex 布局
垂直居中依赖的是父容器的 flex 行为，不是子元素自己设置 align-items。必须给父元素设置 display: flex，再通过 align-items 控制子项在交叉轴（默认为纵轴）上的对齐方式。
- 父元素加
display: flex和align-items: center - 若希望同时水平居中，可加上
justify-content: center - 注意：align-items 作用于所有直接子元素，不是单个块元素自身声明的属性
处理高度不确定或无显式高度的父容器
如果父容器没有设置 height 或 min-height，flex 居中可能“看起来没效果”，因为其高度可能塌缩为内容高度。
- 给父容器设
height: 100vh（视口高）、min-height: 100vh或具体像素值 - 或者让父容器继承高度：
html, body { height: 100%; }，再设父容器height: 100% - 避免仅靠 padding 或 margin “模拟”居中，不可靠且响应性差
兼容性与替代方案提示
Flexbox 在现代浏览器中支持良好（IE10+ 需加 -ms- 前缀，IE9 及以下不支持）。如需兼容老版本 IE：
- 可用绝对定位 + transform：
position: absolute; top: 50%; transform: translateY(-50%) - 或 table-cell 方案（父设
display: table-cell; vertical-align: middle，需配合display: table） - 但这些方案结构受限、语义弱，优先推荐 Flex
用 flex align-items 实现块级元素垂直居中，核心就三点：父容器 display: flex、设 align-items: center、保证父容器有可计算的高度。不复杂但容易忽略细节。
