使用 align-items: center 可实现 Flexbox 容器内元素垂直居中。1. 设置容器 display: flex 和 align-items: center，并定义高度；2. 适用于单行或多行内容、图标与文字对齐等场景；3. 无需计算行高或使用绝对定位，布局更灵活。
要让Flexbox容器内的元素垂直居中，最直接的方式是使用 align-items: center。这个属性作用于交叉轴（cross axis），在大多数情况下就是垂直方向。下面通过几个常见场景说明如何正确使用它来实现垂直居中。
基本垂直居中布局
当希望一个或多个子元素在父容器中垂直居中时，只需将父容器设为 flex 布局，并设置 align-items: center。
- 父容器使用 display: flex
- 添加 align-items: center 实现交叉轴居中
- 默认主轴为水平方向（row），不影响垂直居中效果
示例代码：
.container {
display: flex;
align-items: center;
height: 200px; /* 必须有明确高度才能看到居中效果 */
border: 1px solid #ccc;
}
<p>.item {
padding: 10px;
background-color: #007bff;
color: white;
}</p>HTML结构：
<div class="container"> <div class="item">垂直居中内容</div> </div>
多行文本或复杂内容垂直居中
对于包含多行文字、图标或其他块级元素的组件，传统方法如 line-height 或 vertical-align 往往不够灵活。Flexbox 的 align-items: center 能轻松应对这类情况。
例如：卡片组件中的标题和描述需要整体垂直居中。
- 即使内容换行，也能保持自然居中
- 无需计算高度或使用绝对定位
实践代码：
.card {
display: flex;
align-items: center;
height: 150px;
padding: 10px;
background: #f9f9f9;
border: 1px solid #ddd;
}
<p>.content {
line-height: 1.5;
}</p>图标与文字垂直对齐
在按钮或导航项中，常需将图标和文字在垂直方向对齐居中。使用 align-items: center 可确保它们始终与容器中间对齐。
应用场景：带图标的按钮
.icon-button {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
background: #0056b3;
color: white;
border: none;
cursor: pointer;
height: 48px;
}
<p>.icon-button img {
width: 20px;
height: 20px;
}</p>此时无论字体大小如何变化，图标和文字都会一起在按钮内部垂直居中。
基本上就这些。只要容器是 flex，加上 align-items: center，就能快速实现子元素的垂直居中，适用于大多数现代布局需求。关键是确保容器有明确的高度，否则“居中”可能没有明显效果。
