HTML5 垂直居中推荐使用 Flexbox：设父容器 display: flex 并加 align-items: center；次选 Grid（display: grid + align-items: center）；兼容旧浏览器可用绝对定位 +transform 或 table-cell 模拟；行高法仅适用于单行文本。
如果您希望在 HTML5 页面中实现元素的 垂直居中 布局，但发现传统浮动或行高方式失效或不够灵活，则可能是由于现代文档流与 CSS 渲染机制的变化所致。以下是多种兼容性良好、语义清晰的 HTML5 垂直居中实现方式：
一、使用 Flexbox 布局
Flexbox 是 HTML5 推荐的现代布局方案，通过设置容器为弹性盒子，可直接控制子元素在主轴和交叉轴上的对齐行为，实现精准垂直居中。
1、将父容器的 display 属性设置为 flex。
2、为父容器添加 align-items: center 声明，使子元素沿交叉轴（垂直方向）居中。
立即学习 “ 前端免费学习笔记（深入）”；
3、若需同时水平居中，追加 justify-content: center。
4、确保父容器具有明确的高度（如 height: 100vh），否则垂直居中可能无视觉效果。
二、使用 CSS Grid 布局
CSS Grid 提供二维布局能力，无需依赖父容器高度计算，仅通过定义网格区域与对齐策略即可完成垂直居中。
1、将父容器的 display 属性设置为 grid。
2、为父容器添加 align-items: center，控制所有直接子项在行内轴垂直方向居中。
3、若仅需单个子元素居中，可配合 place-items: center 简化写法。
4、注意：Grid 在 IE11 中仅支持旧版语法，需避免使用 subgrid 等新特性。
三、使用 绝对定位 配合 transform
该方法兼容至 IE9，适用于已知宽高的子元素，通过偏移与反向位移抵消实现居中定位。
1、将子元素的 position 设为 absolute。
2、设置 top: 50% 使元素上边缘位于父容器垂直中心线。
3、设置 left: 50% 使元素左边缘位于父容器水平中心线。
4、添加 transform: translate(-50%, -50%)将元素自身宽高的一半反向位移。
5、必须确保父容器 position 不为 static（如设为 relative）。
四、使用 table-cell 模拟表格单元格
利用 display: table-cell 的垂直对齐特性，结合 vertical-align: middle 实现居中，适用于内容流式、高度不确定的场景。
1、将父容器 display 设为 table，高度设为 100% 或具体值。
2、将子容器 display 设为 table-cell。
3、为子容器添加 vertical-align: middle。
4、若需水平居中，追加 text-align: center（对内联内容有效）。
5、该方式会破坏语义结构，不推荐用于复杂 响应式布局。
五、使用行内块级元素与行高匹配
适用于单行纯文本或内联元素，通过设置父容器 line-height 等于其高度，再结合 vertical-align 实现居中。
1、为父容器设置固定高度（如 height: 200px）。
2、将父容器 line-height 设为相同数值（如 line-height: 200px）。
3、将子元素设为 inline-block 并添加 vertical-align: middle。
4、若子元素含多行内容，需额外清除 line-height 影响，改用其他方案。
5、仅适用于单行文本或尺寸可控的内联元素，不适用于块级容器嵌套。
以上就是
