使用 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
确保子元素不会撑满整个高度（可选：设置高度或内边距测试效果）
示例代码：
立即学习
“
前端免费学习笔记（深入）
”；
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
HTML 结构：
适用场景和注意事项
这个方法特别适合以下情况：
单个或多个子元素都需要垂直居中
子元素高度不固定
响应式设计
中容器高度动态变化
需要注意的是：
父容器必须有明确的高度
，否则“居中”无从谈起。同时，如果你还需要水平居中，可以再加上
justify-content: center
，实现完全居中。
基本上就这些，用 flex 和 align-items:center 解决垂直居中问题，简单直接，兼容性好，现代
浏览器
都支持，推荐作为首选方案。
.parent {
display: flex;
align-items: center;
height: 300px; /* 父容器需要有高度才能看出居中效果 */
border: 1px solid #ccc;
}
.child {
padding: 20px;
background-color: #007acc;
color: white;
}
我被垂直居中了！