Flexbox垂直居中技巧：align-items用法详解

本文深入解析了利用Flexbox的align-items: center实现元素垂直居中的核心技巧，强调其简洁高效、兼容性好且适用于现代浏览器的突出优势；通过明确父容器高度、启用display: flex，并辅以justify-content: center即可轻松达成水平与垂直双重居中，广泛覆盖卡片、导航栏、模态框等实际开发场景——掌握这一看似简单却常被忽略的关键细节（尤其是高度设定），就能彻底告别传统CSS垂直居中难题。

在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，是目前实现垂直居中的最推荐方式之一，简洁且兼容性良好。不复杂但容易忽略的是父容器的高度设置 —— 这一步必不可少。

文中关于CSS,FLEXBOX的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《Flexbox垂直居中技巧：align-items用法详解》文章吧，也可关注golang学习网公众号了解相关技术文章。