如何用css flex实现垂直居中布局

技术教程
2025-10-12 21:41:01

答案：通过设置display: flex，结合align-items和justify-content实现垂直水平居中。具体为：1. 垂直居中用align-items: center；2. 完全居中加justify-content: center；3. 多元素纵向居中使用flex-direction: column并配合justify-content与align-items。

如何用css flex实现垂直居中布局

要使用 CSS Flex 实现垂直居中布局，关键在于将父容器设置为 Flex 容器，并利用 align-items 和 justify-content 属性控制子元素在交叉轴和主轴上的对齐方式。

1. 基本垂直居中（单行元素）

如果只想让子元素在容器中垂直居中（沿交叉轴），可以使用 align-items: center。

.container {
  display: flex;
  align-items: center; /* 垂直居中 */
  height: 300px; /* 需要有高度才能看到效果 */
}

这个方法适用于文本、按钮等单行内容的垂直居中。

2. 完全居中（垂直 + 水平）

如果需要同时实现垂直和水平居中，加上 justify-content: center 即可。

.container {
  display: flex;
  align-items: center;      /* 垂直居中 */
  justify-content: center;  /* 水平居中 */
  height: 300px;
  width: 100%;
}

这种方法适合模态框、登录框、提示弹窗等需要在页面正中间显示的内容。

AI社交封面生成器

一句话/一张图一键智能生成社交媒体图片的AI设计神器

108 查看详情 AI社交封面生成器

3. 多个子元素垂直居中排列

当有多个子项时，默认会横向排列。若希望它们纵向堆叠并各自垂直居中，可以改变主轴方向。

.container {
  display: flex;
  flex-direction: column;
  align-items: center;     /* 水平居中（在纵轴布局中变为水平对齐） */
  justify-content: center; /* 垂直居中 */
  height: 400px;
}

这种布局常用于移动端竖屏内容展示或列表项的居中排布。

基本上就这些。只要记住 align-items 控制交叉轴（通常为垂直方向），justify-content 控制主轴方向，再根据需要调整 flex-direction，就能灵活实现各种居中效果。

以上就是如何用css flex实现垂直居中布局的详细内容，更多请关注其它相关文章！