使用 align-items: center 可在 Flexbox 布局中实现子元素垂直居中。该属性作用于交叉轴，当主轴为水平时，交叉轴即为垂直方向。只需将父容器设置为 display: flex，并添加 align-items: center，即可使子元素在容器内垂直居中。适用于子元素高度不确定、多子元素或响应式场景。需确保父容器有明确高度，若同时需要水平居中，可配合 justify-content: center 使用。此方法简洁高效，兼容性好，推荐作为首选方案。
垂直居中在CSS布局中确实常让人头疼，尤其是子元素高度不确定或容器尺寸动态变化时。其实，使用 align-items: center 是一种简洁高效的解决方案，前提是你要合理使用 Flexbox 布局。
什么是 align-items: center？
align-items 是 Flexbox 中的一个关键属性，用于控制 flex 容器中子元素在交叉轴（cross axis）上的对齐方式。当主轴是水平方向时，交叉轴就是垂直方向。因此，设置 align-items: center 就能让子元素在容器中垂直居中。
如何用 align-items:center 实现垂直居中？
只需要三步即可完成：
- 将父容器的 display 设置为 flex
- 给父容器添加 align-items: center
- 确保子元素不会撑满整个高度（可选：设置高度或内边距测试效果）
示例代码：
立即学习“前端免费学习笔记（深入）”；
.parent {
display: flex;
align-items: center;
height: 300px; /* 父容器需要有高度才能看出居中效果 */
border: 1px solid #ccc;
}
<p>.child {
padding: 20px;
background-color: #007acc;
color: white;
}</p>HTML 结构：
<div class="parent"> <div class="child">我被垂直居中了！</div> </div>
适用场景和注意事项
这个方法特别适合以下情况：
- 单个或多个子元素都需要垂直居中
- 子元素高度不固定
- 响应式设计中容器高度动态变化
需要注意的是：父容器必须有明确的高度，否则“居中”无从谈起。同时，如果你还需要水平居中，可以再加上 justify-content: center，实现完全居中。
基本上就这些，用 flex 和 align-items:center 解决垂直居中问题，简单直接，兼容性好，现代浏览器都支持，推荐作为首选方案。
