CSS弹性盒子布局如何通过justify-content和align-items实现水平垂直居中

CSS弹性盒子布局是前端开发中常用的布局方式，能够轻松处理元素的对齐和分布问题，其中通过justify-content和align-items属性实现水平垂直居中是该布局的典型应用场景。

弹性盒子布局基础概念

要使用弹性盒子布局，首先需要给父容器设置display: flex属性，此时该容器就会成为弹性容器，内部的直接子元素会成为弹性项目。弹性盒子默认存在主轴和交叉轴，主轴的方向由flex-direction属性决定，默认是水平方向从左到右，交叉轴则是和主轴垂直的方向。

justify-content属性

justify-content属性用于定义弹性项目在主轴上的对齐方式，常用取值包括：

• flex-start：默认值，项目向主轴起点对齐
• flex-end：项目向主轴终点对齐
• center：项目在主轴上居中对齐
• space-between：项目两端对齐，项目之间间隔相等
• space-around：每个项目两侧的间隔相等

align-items属性

align-items属性用于定义弹性项目在交叉轴上的对齐方式，常用取值包括：

• stretch：默认值，项目被拉伸以适应交叉轴的高度
• flex-start：项目向交叉轴起点对齐
• flex-end：项目向交叉轴终点对齐
• center：项目在交叉轴上居中对齐
• baseline：项目按第一行文字的基线对齐

实现水平垂直居中的具体方法

当弹性容器的主轴为水平方向时，要实现子元素的水平垂直居中，只需要将justify-content设置为center，让子元素在主轴（水平方向）居中，同时将align-items设置为center，让子元素在交叉轴（垂直方向）居中即可。

基础居中示例

以下是一个简单的实现示例，父容器宽高固定，内部单个子元素实现水平垂直居中：

/* 父容器样式 */
.container {
    width: 500px;
    height: 300px;
    border: 1px solid #ccc;
    /* 开启弹性盒子布局 */
    display: flex;
    /* 主轴水平居中 */
    justify-content: center;
    /* 交叉轴垂直居中 */
    align-items: center;
}

/* 子元素样式 */
.child {
    width: 100px;
    height: 100px;
    background-color: #409eff;
}

对应的HTML结构如下：

<div class="container">
    <div class="child"></div>
</div>

多个子元素居中示例

如果父容器内有多个子元素，同样可以使用这两个属性实现整体水平垂直居中，所有子元素会作为一个整体在主轴和交叉轴上居中排列：

.container {
    width: 600px;
    height: 400px;
    border: 1px solid #ddd;
    display: flex;
    justify-content: center;
    align-items: center;
    /* 可选：设置主轴方向为水平，默认值可以省略 */
    flex-direction: row;
    /* 可选：设置子元素换行 */
    flex-wrap: wrap;
    gap: 20px;
}

.child {
    width: 120px;
    height: 80px;
    background-color: #67c23a;
}

HTML结构：

<div class="container">
    <div class="child">元素1</div>
    <div class="child">元素2</div>
    <div class="child">元素3</div>
</div>

主轴方向变化时的调整

如果通过flex-direction修改了主轴的方向，比如设置为column让主轴变为垂直方向，此时justify-content控制的是垂直方向的对齐，align-items控制的是水平方向的对齐，要实现水平垂直居中，属性设置的逻辑不变，只需要理解主轴和交叉轴的对应关系即可。

示例：主轴为垂直方向时的居中设置

.container {
    width: 400px;
    height: 500px;
    border: 1px solid #eee;
    display: flex;
    /* 主轴改为垂直方向 */
    flex-direction: column;
    /* 主轴（垂直方向）居中 */
    justify-content: center;
    /* 交叉轴（水平方向）居中 */
    align-items: center;
}

.child {
    width: 150px;
    height: 60px;
    background-color: #e6a23c;
    margin: 10px 0;
}

注意事项

• 弹性盒子的justify-content和align-items属性只对直接子元素生效，嵌套的子元素需要单独设置弹性布局。
• 如果弹性项目设置了margin: auto，会覆盖justify-content和align-items的对齐效果，因为auto margin会占据剩余空间。
• 当弹性容器的高度没有显式设置时，align-items的center效果可能无法体现，因为交叉轴的高度由内容决定，需要给容器设置明确的高度或者让容器占满父元素高度。

弹性盒子布局的水平垂直居中方案兼容性较好，支持现代主流浏览器，在移动端布局中也有广泛的应用，掌握justify-content和align-items的用法能够大幅提升布局效率。

CSS弹性盒子布局flexboxjustify-contentalign-items修改时间：2026-07-23 21:48:30