使用align-items: center配合display: flex可实现垂直居中，需父容器有高度且设置flex布局，结合justify-content: center还可实现水平居中，适用于现代浏览器中的各类对齐场景。
在CSS中使用Flexbox实现垂直居中，最常用的方法就是通过 align-items: center 结合 display: flex 来完成。这种方法简单、高效，适用于大多数现代浏览器。
基本原理：使用 align-items 实现垂直居中
要让一个或多个子元素在父容器中垂直居中，需要将父容器设置为 Flex 容器，并使用 align-items: center 属性。这个属性控制交叉轴（cross axis）上的对齐方式，在默认的行方向（flex-direction: row）下，交叉轴是垂直方向。
示例代码：
.container {
display: flex;
align-items: center;
height: 300px; /* 必须有明确高度才能看到垂直居中效果 */
border: 1px solid #ccc;
}
.item {
padding: 20px;
background-color: #007acc;
color: white;
}
在这个例子中，.item 元素会在 .container 中垂直居中显示，前提是容器有设定的高度。
立即学习“前端免费学习笔记（深入）”；
同时实现水平和垂直居中
如果还需要水平居中，可以加上 justify-content: center，它控制主轴（main axis）的对齐。
完整居中代码：
.container {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
height: 300px;
border: 1px solid #ddd;
}
此时，子元素会在父容器中完全居中（水平 + 垂直）。
关键注意事项
- 父容器必须有高度：如果父容器没有设定高度（如 height 或 min-height），align-items: center 可能不会表现出预期的垂直居中效果。
- display: flex 不可少：只有设置了 display: flex 或 display: inline-flex，align-items 才会生效。
- 适用于块级和行内元素：Flexbox 不关心子元素类型，都能统一处理对齐。
适用场景举例
- 卡片内容垂直居中
- 导航栏中的图标与文字对齐
- 模态框或弹窗的主体内容居中
- 响应式布局中的灵活对齐
基本上就这些。用 align-items: center 配合 Flexbox，是目前实现垂直居中的最推荐方式之一，简洁且兼容性良好。不复杂但容易忽略的是父容器的高度设置 —— 这一步必不可少。
