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
Display the flex lines in the center of the container with CSS
The CSS align-content property is used to control how flex lines are distributed along the cross-axis in a flex container. When set to center, it positions all flex lines in the center of the container.
Syntax
selector {
align-content: center;
}
Example
The following example demonstrates how to center flex lines within a container −
<!DOCTYPE html>
<html>
<head>
<style>
.mycontainer {
display: flex;
height: 300px;
background-color: #f0f0f0;
align-content: center;
flex-wrap: wrap;
border: 2px solid #333;
}
.mycontainer > div {
background-color: #4CAF50;
color: white;
text-align: center;
line-height: 60px;
font-size: 20px;
width: 100px;
margin: 5px;
border-radius: 5px;
}
</style>
</head>
<body>
<h2>Flex Lines Centered</h2>
<div class="mycontainer">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
<div>Item 5</div>
<div>Item 6</div>
</div>
</body>
</html>
A flex container with green flex items arranged in multiple rows, all centered vertically within the container. The items wrap to new lines and the entire group of lines appears in the middle of the 300px tall container.
Key Points
- The
align-content: centerproperty only works whenflex-wrap: wrapis enabled - It centers the flex lines as a group, not individual items
- The container must have enough height for the centering effect to be visible
Conclusion
The align-content: center property effectively centers flex lines within their container. Remember to use flex-wrap: wrap to enable multiple lines for this property to take effect.
Updated on: 2026-03-15T13:14:55+05:30
161 Views
Advertisements