使用align-items: center可实现Flexbox垂直居中，结合justify-content: center可同时水平居中，需确保父容器有明确高度，适用于各种内容布局。
在CSS中使用Flexbox实现垂直居中非常简单且高效，尤其适合现代网页布局。只需要几个关键属性，就能让子元素在父容器中完美垂直居中，甚至同时水平居中。
使用align-items垂直居中
如果只想让子元素在交叉轴（通常是垂直方向）上居中，可以使用 align-items: center。
示例：父容器设置：
display: flex;
align-items: center;
这样，所有直接子元素会在容器中垂直居中。
同时垂直和水平居中：align-items + justify-content
想要子元素在父容器中完全居中（既垂直又水平），需要结合两个属性。
立即学习“前端免费学习笔记（深入）”；
常用组合：- display: flex
- align-items: center
- justify-content: center
justify-content: center 控制主轴方向（默认是水平）的对齐方式。
单个子元素居中示例
假设有一个卡片或提示框需要居中显示：
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh; /* 充满整个视口高度 */
}
.content {
/* 子元素无需特殊设置 */
}
这个方法适用于任何尺寸的内容，包括文字、图片或复杂组件。
注意事项
确保父容器有明确的高度（如 height 设置为具体值或 vh 单位），否则 Flexbox 的居中可能无法正确生效。
flex-direction 改变主轴方向时，align-items 和 justify-content 的作用轴也会相应变化，注意区分主轴与交叉轴。
基本上就这些，Flexbox让垂直居中不再棘手。不复杂但容易忽略细节。
