Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Role of CSS justify-content property center value
The CSS justify-content property with the center value is used to align flex items to the center of the main axis in a flex container. This creates equal spacing on both sides of the flex items, centering them horizontally within their container.
Syntax
.container {
display: flex;
justify-content: center;
}
Example
The following example demonstrates how to center flex items using justify-content: center −
<!DOCTYPE html>
<html>
<head>
<style>
.mycontainer {
display: flex;
background-color: #e74c3c;
justify-content: center;
padding: 10px;
margin: 20px 0;
}
.mycontainer > div {
background-color: #f39c12;
text-align: center;
line-height: 60px;
font-size: 24px;
width: 80px;
margin: 5px;
border-radius: 5px;
color: white;
font-weight: bold;
}
</style>
</head>
<body>
<h2>Centered Flex Items</h2>
<div class="mycontainer">
<div>Q1</div>
<div>Q2</div>
<div>Q3</div>
<div>Q4</div>
</div>
</body>
</html>
A red flex container with four orange rounded boxes labeled Q1, Q2, Q3, and Q4 appears centered horizontally within the container, with equal spacing on both sides.
Conclusion
The justify-content: center property is essential for centering flex items along the main axis. It distributes items with equal space on both sides, making it perfect for creating balanced, centered layouts in flexbox containers.
Updated on: 2026-03-15T13:13:02+05:30
276 Views
Advertisements