CSS justify-content:center的使用详解

CSS的justify-content属性用于控制子元素在主轴（水平方向或垂直方向）上的排列方式。其中，center值可以使子元素在主轴上居中对齐。下面我们来详细了解一下这个属性。

基本用法

justify-content:center的基本用法如下:

.container{
    display: flex;
    justify-content: center;
}

其中，.container表示容器，设置display:flex表示启用flex布局。justify-content:center表示将子元素在主轴上居中对齐。

示例HTML代码如下：

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

示例CSS代码如下：

.container{
    display: flex;
    justify-content: center;
}
.child{
    width: 100px;
    height: 50px;
    background-color: #eee;
}

上面的代码将容器和子元素的基本样式设置好了，我们来看一下效果。

可以看到，子元素已经在主轴上居中对齐了。容器有一个边框是为了让我们更清晰地看到容器的大小和子元素的位置。

多个元素居中对齐

如果我们需要将多个子元素在主轴上居中排列，可以设置flex-direction属性为row或column，然后再设置justify-content:center。

例如，将多个子元素在水平方向上居中排列。

.container{
    display: flex;
    flex-direction: row;
    justify-content: center;
}

示例HTML代码如下：

<div class="container">
    <div class="child">One</div>
    <div class="child">Two</div>
    <div class="child">Three</div>
</div>

示例CSS代码如下：

.container{
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.child{
    width: 50px;
    height: 50px;
    background-color: #eee;
    margin: 0 10px;
}

效果如下：

同理，在垂直方向上居中排列也是一样的，只需要将flex-direction设置为column即可。

justify-content属性的其他可选值

除了center以外，justify-content属性还有以下可选值：

1. flex-start，表示将子元素在主轴上左对齐。
2. flex-end，表示将子元素在主轴上右对齐。
3. space-between，表示将子元素沿主轴等间距排列，并在两端不留空白。
4. space-around，表示将子元素沿主轴等间距排列，并在两端留出一半的空白。

下面用代码和图表解释这几个值的作用。

flex-start

flex-start将子元素在主轴上左对齐。示例代码如下：

.container{
    display: flex;
    justify-content: flex-start;
}

示例HTML代码和CSS代码和之前相同，这里不再赘述。效果如下：

flex-end

flex-end将子元素在主轴上右对齐。示例代码如下：

.container{
    display: flex;
    justify-content: flex-end;
}

效果如下：

space-between

space-between将子元素沿主轴等间距排列，并在两端不留空白。示例代码如下：

.container{
    display: flex;
    justify-content: space-between;
}

效果如下：

可以看到，子元素之间等间距排列，并且两端没有留空白。

space-around

space-around将子元素沿主轴等间距排列，并在两端留出一半的空白。示例代码如下：

.container{
    display: flex;
    justify-content: space-around;
}

效果如下：

可以看到，子元素之间等间距排列，并且两端留出一半的空白。

结论

justify-content:center是CSS的一个非常常用的布局属性，可以用来控制子元素在主轴上居中对齐。除此之外，还有其他几个可选值，用来实现不同的布局效果。掌握justify-content属性可以让我们更好地应用flex布局，提高开发效率。