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
How to center a using the Flexbox property of CSS?
To center a div using flexbox property of CSS, we use CSS flexbox and its properties. In this article, we will understand and perform following three methods to center a div using the Flexbox property of CSS:
- Center div Using flexbox on Horizontal Axis
- Center div Using flexbox on Both Axes
- Center Multiple Items Using Flexbox
Syntax
.container {
display: flex;
justify-content: center; /* horizontal centering */
align-items: center; /* vertical centering */
}
Center div Using flexbox on Horizontal Axis
To center div on horizontal axis, we use CSS justify-content property which centers div horizontally
Example
Here is an example to center div on horizontal axis ?
<!DOCTYPE html>
<html>
<head>
<title>Center a div using flex property</title>
<style>
.container {
display: flex;
justify-content: center;
border: 2px dashed #999;
padding: 20px;
}
.item {
border: 2px solid green;
width: 100px;
height: 100px;
background-color: rgb(109, 224, 244);
}
</style>
</head>
<body>
<h3>Center div Using flexbox on Horizontal Axis</h3>
<p>We have used <strong>justify-content</strong> property to center the item horizontally.</p>
<div class="container">
<div class="item"></div>
</div>
</body>
</html>
A light blue square box with green border appears centered horizontally within the dashed container border.
Center div Using flexbox on Both Axes
To center div using flexbox on both axes we use CSS justify-content and align-items properties:
- We use "display: flex;" to make flexible container.
- We use "justify-content: center;" to center the div horizontally.
- We use CSS height property to set the height of container and use "align-items: center;" to center the div vertically.
Example
<!DOCTYPE html>
<html>
<head>
<title>Center a div using flex property</title>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
border: 2px dashed #999;
}
.item {
border: 2px solid green;
width: 100px;
height: 100px;
background-color: rgb(109, 224, 244);
}
</style>
</head>
<body>
<h3>Center div Using flexbox on both Axes</h3>
<p>We have used <strong>justify-content</strong> to center horizontally and <strong>align-items</strong> to center vertically.</p>
<div class="container">
<div class="item"></div>
</div>
</body>
</html>
A light blue square box with green border appears perfectly centered both horizontally and vertically within the tall dashed container.
Center Multiple Items Using Flexbox
In this section, we will center multiple flex items using flexbox. For this we use CSS flex-direction property which displays flex items according to the value specified:
- For aligning multiple items, we use "flex-direction: column;" property which displays the flex items vertically.
- We center multiple flex items and use flex-direction: column to display them vertically. Other flex-direction values include row, row-reverse and column-reverse.
Example
Here is an example to center multiple items using flexbox ?
<!DOCTYPE html>
<html>
<head>
<title>Center multiple divs using CSS flexbox</title>
<style>
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 300px;
border: 2px dashed #999;
}
.item {
padding: 10px;
background-color: #04af2f;
color: white;
margin: 5px;
text-align: center;
letter-spacing: 1px;
border: 1px solid black;
}
</style>
</head>
<body>
<h3>Center Multiple Items Using flex Property</h3>
<p>We have used <strong>flex-direction</strong> property to display items vertically.</p>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>
Three green rectangular boxes with white text ("Item 1", "Item 2", "Item 3") appear stacked vertically and centered within the dashed container.
Conclusion
CSS flexbox provides a powerful and simple way to center elements. Using justify-content: center centers items horizontally, while align-items: center centers them vertically. Combined with flex-direction, you can easily center single or multiple items in any layout.
4K+ Views
