在前端布局开发中，让元素在容器内完全居中是非常高频的需求，传统方法往往需要计算边距或者定位偏移，操作繁琐还容易出现兼容性问题。使用css的flex布局配合justify-content和align-items属性，可以用极简的代码实现稳定的完全居中效果。
两个核心属性的作用
要实现完全居中，首先需要理解justify-content和align-items在flex容器中的作用：
- justify-content：用于控制flex容器内子元素在主轴方向上的对齐方式，默认主轴是水平方向，设置该属性可以调整子元素水平位置。
- align-items：用于控制flex容器内子元素在交叉轴方向上的对齐方式，默认交叉轴是垂直方向，设置该属性可以调整子元素垂直位置。
当我们将容器设置为flex布局后，同时把justify-content设置为center，align-items设置为center，就可以让子元素同时在水平和垂直方向居中，也就是完全居中。
基础完全居中实现
下面是一个最简单的完全居中示例，容器宽高固定，内部有一个小盒子需要居中：
/* 容器样式 */
.container {
width: 500px;
height: 300px;
border: 1px solid #ccc;
/* 开启flex布局 */
display: flex;
/* 水平方向居中 */
justify-content: center;
/* 垂直方向居中 */
align-items: center;
}
/* 子元素样式 */
.center-box {
width: 100px;
height: 100px;
background-color: #409eff;
}
对应的html结构如下：
<div class="container">
<div class="center-box"></div>
</div>
运行后可以看到，蓝色的center-box会在灰色的container容器内完全居中，水平和垂直方向都处于正中间位置。
多子元素的完全居中
如果容器内存在多个子元素，这两个属性同样可以实现完全居中，此时所有子元素会作为一个整体在容器中居中：
.multi-container {
width: 600px;
height: 400px;
border: 1px solid #eee;
display: flex;
justify-content: center;
align-items: center;
/* 可选：设置子元素之间的间距 */
gap: 20px;
}
.multi-item {
width: 80px;
height: 80px;
background-color: #67c23a;
}
<div class="multi-container">
<div class="multi-item">1</div>
<div class="multi-item">2</div>
<div class="multi-item">3</div>
</div>
此时三个绿色的方块会并排作为一个整体，在容器内完全居中，互相之间还有20px的间距。
修改主轴方向的居中调整
如果我们将flex容器的主轴方向修改为垂直方向，justify-content和align-items的作用方向也会对应交换：
.column-container {
width: 300px;
height: 500px;
border: 1px solid #ddd;
display: flex;
/* 修改主轴为垂直方向 */
flex-direction: column;
/* 此时控制垂直方向居中 */
justify-content: center;
/* 此时控制水平方向居中 */
align-items: center;
}
.column-item {
width: 120px;
height: 60px;
background-color: #e6a23c;
margin: 10px 0;
}
这种情况下，子元素会垂直排列，整体在容器内完全居中，justify-content控制垂直位置，align-items控制水平位置，原理和默认主轴方向一致。
使用注意事项
- 必须先将容器设置为
display: flex，否则justify-content和align-items不会生效。 - 如果容器没有设置明确的高度，align-items的居中效果可能无法体现，因为容器高度会被子元素撑开。
- 当子元素尺寸超过容器尺寸时，居中效果会失效，此时需要先调整子元素尺寸或者容器尺寸。
- 这两个属性是flex布局的专属属性，在传统块级布局或者行内布局中无法直接使用。
通过justify-content和align-items实现完全居中的方法兼容性很好，现代浏览器都支持，相比传统定位或者margin计算的方法，代码更简洁，维护成本更低，适合大多数常规布局场景使用。
cssjustify-contentalign-itemsflex布局元素居中修改时间：2026-06-09 21:51:23