如何在CSS中使用Flexbox实现垂直居中_align-items center实现容器居中

P粉602998670 2025-12-21 00:00:00 次阅读

使用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 不关心子元素类型，都能统一处理对齐。