Detailed Explanation of CSS justify-content:center

The justify-content:center property in CSS is very powerful. It can be used to center an element (usually a child element within a flex container) horizontally. Clear, concise code is what we should strive for. Today, I will explain in detail how to use justify-content:center in CSS.

Basic Usage

First, let’s look at the basic usage, as shown below:

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

.container{ 
display:flex; 
justify-content:center; 
} 
.content{ 
width:150px; 
height:150px; 
background-color:#ccc; 
margin:10px; 
} 

The above code aligns all child elements in the flex container horizontally in the center. The justify-content:center property centers the child elements along the main axis, where the main axis refers to the direction of the flex container. In this case, we use display:flex to set the container to flex layout and apply the justify-content:center property to the container element.

The Relationship Between align-items and Margin

Next, let’s look at vertically centering child elements within a container. We can use the align-items:center property to achieve vertical center alignment.

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

.container{ 
display:flex; 
justify-content:center; 
align-items:center; /* Vertically center */ 
} 
.content{ 
width:150px; 
height:150px; 
background-color:#ccc; 
margin:10px; 
} 

Although the child elements are now vertically centered, the spacing between them may not meet our needs. We can use the margin property to change the spacing between child elements.

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

.container{ 
display:flex; 
justify-content:center; 
align-items:center; /* vertically center */ 
} 
.content{ 
width:150px; 
height:150px; 
background-color:#ccc; 
margin:0 10px; /* 10px left and right margins */ 
} 

In this code, we apply the margin property to the child elements. This will create a 10px gap between each child element.

flex-wrap

Sometimes we have a large container containing many smaller containers, and we want the smaller containers to fit on a single line. In these cases, we can use the flex-wrap property to control line wrapping.

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

.container{ 
display:flex; 
justify-content:center; 
align-items:center; 
flex-wrap:wrap; /* wrap line */ 
} 
.content{ 
width:150px; 
height:150px; background-color:#ccc;
margin:0 10px 10px 0;
}

In this code, we set the flex-wrap property to wrap, allowing the small containers to display horizontally. If a single line doesn’t fit all the small containers, we automatically wrap the remaining small containers to the next line.

justify-content:space-between

When we want to create equal spacing between elements horizontally, we use the justify-content:space-between property.

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

</div>

.container{
display:flex;
justify-content:space-between; /* Equal spacing between elements */
}

.content{
width:150px;
height:150px;
background-color:#ccc;
}

Now, the three child elements will be evenly spaced within the flex container, with equal spacing between them.

justify-content:space-around

When we want to make the spacing between elements equal and the distance between them equal in the horizontal direction, we can use the justify-content:space-around property.

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

.container{ 
display:flex; 
justify-content:space-around; /* Elements are evenly spaced and evenly spaced from the container */ 
} 
.content{ 
width:150px; 
height:150px; 
background-color:#ccc; 
} 

At this point, the three child elements will be evenly spaced within the flex container, with equal spacing between them and equal distance from the container.

justify-content:space-evenly

When we want to make the spacing between elements equal in the horizontal direction and the distance between elements and the ends of the container equal, we can use the justify-content:space-evenly property.

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

.container{ 
display:flex; 
justify-content:space-evenly; /* Elements are evenly spaced and evenly spaced from both ends of the container */ 
} 
.content{ 
width:150px; 
height:150px; 
background-color:#ccc; 
} 

At this point, the three child elements will be evenly spaced within the flex container, with equal spacing between them and equal distances from both ends of the container.

Conclusion

In summary, the CSS justify-content:center property is extremely useful in flex layouts. We can use it to horizontally center elements and further manipulate the layout using other properties (such as flex-wrap, align-items, margin, space-between, space-around, and space-evenly) to achieve the desired effect.