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 实现子元素水平居中。
语法
.container {
display: flex;
justify-content: center; /* 主轴居中 */
}
3.2 align-items: center
作用
控制 flex 容器内子元素在交叉轴方向上的对齐方式，center 值表示子元素在交叉轴上居中对齐。
默认场景（交叉轴垂直）
当容器未修改 flex-direction 时，align-items: center 实现子元素垂直居中。
语法
.container {
display: flex;
align-items: center; /* 交叉轴居中 */
}
3.3 组合使用（最常用）
效果
子元素在 flex 容器内水平+垂直完全居中。
完整示例代码
<!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（主轴改为垂直方向）时，两个属性的作用方向会互换：
.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 布局）。
