How to center a <div> using Flexbox property of CSS ?
Last Updated :
25 Jun, 2021
In this article, we will learn to center an HTML div element using flexbox property of CSS.
Please refer this article to know more about flexbox.
Approach: To center the <div> element horizontally using flexbox.
- We use the property of display set to flex i.e. display: flex;
- Align items to center using align-items: center;
- The last step is to set justify-content to center i.e. justify-content: center;
Example 1: The following example is using flex property.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.center {
display: flex;
justify-content: center;
color: green;
}
</style>
</head>
<body>
<h2 style="color:green">GeeksforGeeks</h2>
<div class='center'>
This text is centered
</div>
</body>
</html>
|
Output:
Example 2: If we want to center the <div> horizontally and vertically, we just add height: 500px; in the CSS part of the code.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.center {
display: flex;
justify-content: center;
align-items: center;
height: 500px;
}
</style>
</head>
<body>
<h2 style="color:green">GeeksforGeeks</h2>
<div class="center">
This text is centered
</div>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...