flex布局实现水平和垂直对齐

1. 概述

align-items: center 和 justify-content: center 是 CSS Flex 布局（弹性布局）中用于控制子元素对齐方式的核心属性，二者搭配使用可实现子元素在 flex 容器内水平+垂直双方向居中，是前端开发中最常用的居中布局方案之一。

前置条件

使用这两个属性的前提是：给父容器设置 display: flex;（开启 Flex 布局），否则属性不生效。

2. 核心概念：Flex 布局的轴

Flex 布局包含两个基础轴，理解轴的概念是掌握这两个属性的关键：

轴类型	默认方向	作用范围
主轴（Main Axis）	水平方向（左→右）	`justify-content` 作用轴
交叉轴（Cross Axis）	垂直方向（上→下）	`align-items` 作用轴

提示：可通过 flex-direction 修改主轴方向（如 flex-direction: column 会将主轴改为垂直方向），此时两个属性的作用方向也会同步变化。

3. 属性详细说明

3.1 justify-content: center

作用

控制 flex 容器内子元素在主轴方向 上的对齐方式，center 值表示子元素在主轴上居中对齐。

默认场景（主轴水平）

当容器未修改 flex-direction 时，justify-content: center 实现子元素水平居中。

语法

css 复制代码

.container {
  display: flex;
  justify-content: center; /* 主轴居中 */
}

3.2 align-items: center

作用

控制 flex 容器内子元素在交叉轴方向 上的对齐方式，center 值表示子元素在交叉轴上居中对齐。

默认场景（交叉轴垂直）

当容器未修改 flex-direction 时，align-items: center 实现子元素垂直居中。

语法

css 复制代码

.container {
  display: flex;
  align-items: center; /* 交叉轴居中 */
}

3.3 组合使用（最常用）

效果

子元素在 flex 容器内水平+垂直完全居中。

完整示例代码

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Flex 居中示例</title>
  <style>
    /* flex容器 */
    .flex-container {
      width: 500px;       /* 容器宽度 */
      height: 300px;      /* 容器高度 */
      background-color: #f5f5f5;
      border: 1px solid #ddd;
      
      /* 核心居中样式 */
      display: flex;              /* 开启Flex布局 */
      justify-content: center;    /* 水平居中（主轴） */
      align-items: center;        /* 垂直居中（交叉轴） */
    }

    /* flex子元素 */
    .flex-item {
      font-size: 20px;
      padding: 20px 40px;
      background-color: #42b983;
      color: white;
      border-radius: 8px;
    }
  </style>
</head>
<body>
  <div class="flex-container">
    <div class="flex-item">我是居中的子元素</div>
  </div>
</body>
</html>

示例效果

绿色的子元素会精准显示在灰色容器的正中心；
无论子元素内容多少，居中效果始终生效。

4. 特殊场景：修改主轴方向

当设置 flex-direction: column（主轴改为垂直方向）时，两个属性的作用方向会互换：

css 复制代码

.flex-container {
  display: flex;
  flex-direction: column; /* 主轴改为垂直方向 */
  justify-content: center;/* 垂直居中（主轴变为垂直） */
  align-items: center;    /* 水平居中（交叉轴变为水平） */
  width: 500px;
  height: 300px;
  background-color: #f5f5f5;
}

5. 常见注意事项

align-items 和 justify-content 是给 flex 容器设置的属性，不是给子元素设置；
如果 flex 容器未设置固定高度（或高度由内容撑开），align-items: center 垂直居中效果会不明显；
多个子元素时，二者仍会让所有子元素整体在容器内居中（子元素之间默认沿主轴排列）。

6. 兼容性

支持所有现代浏览器（Chrome、Firefox、Safari、Edge）；
兼容 IE 10+（IE 9 及以下不支持 Flex 布局）。