How to Center a Div using CSS ?
Last Updated :
27 Mar, 2024
Centering an <div>
 element both vertically and horizontally can be tricky, but fear not! In this complete guide, we’ll explore various techniques to achieve perfect alignment. This center align div article, Includes using flexbox properties, positioning and translate, and the calc() function.
Approaches to Center a div
1. By Using Basic CSS Properties
In the below Example, we will learn to align a div in the center by CSS properties. We need to create a div with center alignment and include <h2> and <p> tags inside. Check the code below to understand better.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
width: auto;
height: 100vh;
}
div {
width: 50%;
margin: auto;
height: auto;
background-color: rgba(
20,
220,
43,
0.267
);
padding: 1rem;
border-radius: 0.5rem;
}
</style>
</head>
<body>
<div>
<h2 style="color: green">
GeeksforGeeks
</h2>
<p>
GeeksforGeeks is the
most-recommended platform for all
CS/IT Students.
</p>
</div>
</body>
</html>
Output:
Center a div using CSS
2. Using Flexbox Properties
- Apply the flexbox properties to the parent container (In this example, apply in body).
- These properties will automatically center the childÂ
<div>
 element.
body {
display: flex;
align-items: center;
justify-content: center;
width: auto;
height: 100vh;
}
Example: Using CSS flexbox properties to align the <div> to the middle of the HTML page.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
width: auto;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
div {
width: 50%;
height: auto;
background-color: rgba(20, 220, 43, 0.267);
padding: 1rem;
border-radius: 0.5rem;
}
</style>
</head>
<body>
<div>
<h2 style="color: green;">
GeeksforGeeks
</h2>
<p>
GeeksforGeeks is the most-recommended
platform for all CS/IT Students.
</p>
</div>
</body>
</html>
Output:
Center div using flexbox property
Explanation:
- We’ve created a simple HTML structure with a centeredÂ
<div>
 containing an <h2>
 and a <p>
 tag. - By applying flexbox properties (
display: flex; align-items: center; justify-content: center;
) to the <body>
, we achieve both vertical and horizontal centering.
3. Using Position and Transform
- Use
transform
:
translate()
;
 and position: relative;
 properties. - Shift the element 50% from the top and 50% from the left to align it at the center.
- Apply the following properties on the <div> element:
div {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Example: Let’s use the above-discussed properties and align <div> horizontally and vertically center.Â
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
width: 100vw;
height: 100vh;
margin: 0;
}
div {
width: 500px;
height: 120px;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(20, 220, 43, 0.267);
padding: 1rem;
border-radius: 0.5rem;
}
</style>
</head>
<body>
<div>
<h2 style="color: green;">
GeeksforGeeks
</h2>
<p>
GeeksforGeeks is the most-recommended
platform for all CS/IT Students.
</p>
</div>
</body>
</html>
Output:
Center div using position relative
Explanation:
- TheÂ
<div>
 is positioned 50% from the top and 50% from the left. - TheÂ
transform: translate(-50%, -50%);
 centers it both vertically and horizontally.
4. Center div using calc() function
- Use calc() function: The calc() function in CSS does calculations based on the values of their parent element or the values provided by the user during the calculation.Â
- The following CSS using calc to measure the position from top and left.
div {
position: fixed;
top: calc(50% - 150px/2);
left: calc(50% - 150px/2);
}
Example: In this example, we are using the above-explained approach.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
width: 100vw;
height: 100vh;
margin: 0;
}
div {
position: fixed;
top: calc(50% - 150px/2);
left: calc(50% - 150px/2);
box-sizing: border-box;
width: 200px;
height: 200px;
text-align: center;
padding: 20px;
background: lightgreen;
}
</style>
</head>
<body>
<div>
<h2 style="color: green;">
GeeksforGeeks
</h2>
<p>
GeeksforGeeks is the most-recommended
platform for all CS/IT Students.
</p>
</div>
</body>
</html>
Output:
Explanation:
- We set theÂ
<body>
 to occupy the entire viewport height (100vh
) and use flexbox to center its content both vertically and horizontally. - The childÂ
<div>
 is positioned absolutely within the <body>
. - TheÂ
calc()
 function is not explicitly used here, but it’s a powerful tool for dynamic calculations. You can apply it to adjust dimensions, margins, or other properties as needed.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...