使用Flexbox实现水平垂直居中只需设置父容器display: flex、align-items: center和justify-content: center，前者控制垂直居中，后者控制水平居中，适用于固定或不固定尺寸的子元素，并支持多子元素集体居中，需确保容器有足够高度（如height: 100vh）以呈现效果。
使用 Flexbox 实现水平垂直居中是一种现代、简洁且兼容性良好的方法。只需要在父容器上设置两个 CSS 属性即可完成。
使用 flex、align-items 和 justify-content
将父容器设置为 Flex 容器，然后通过 align-items 控制交叉轴（垂直）居中，justify-content 控制主轴（水平）居中。
示例代码：
.container {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
height: 100vh; /* 示例：让容器占满视口高度 */
}
这种方法适用于所有类型的子元素，无论其尺寸是否固定，都能完美居中。而且支持多个子元素的集体居中布局。
立即学习“前端免费学习笔记（深入）”；
补充说明
- align-items: center 使子元素在交叉轴（默认为 Y 轴）上居中对齐。
- justify-content: center 使子元素在主轴（默认为 X 轴）上居中对齐。
- 如果容器没有明确高度，可能需要设置高度（如
height: 300px或min-height）才能看到垂直居中效果。
基本上就这些，不复杂但容易忽略细节。只要父元素是 flex 布局，这两个属性一加，内容就稳稳居中了。
