Howdy friends! Are you developing a website where you are having trouble vertically centering a div? No worries, in today’s article we will offer you super simple 3 easy solutions that you can implement in your code to get the job done quickly.
Our solutions are completely JavaSricpt-free and use pure CSS code.
So without any further talks let me take you into the coding process:
1. Use CSS Position and CSS Transform Properties
In our first method to vertically center a div, we are using one of the most ancient tricks to center anything in another element.
This trick is highly reliable since it uses none of the advanced CSS3 properties which only works in the current modern browsers.
In this code block, we first position our element to be “absolute” and then move it positive 50% from the top and left side.
Next, we use the CSS Transform property to move our element in opposite direction by a negative 50%.
Run this below code anywhere. You will understand more:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center a div</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #f0f0f0;
}
.parent_main {
height: 100vh;
width: 100vw;
position: relative;
background-color: #34ace0;
}
.child_sub {
width: 60vw;
height: 60vh;
background-color: #ff5252;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="parent_main">
<div class="child_sub"></div>
</div>
</body>
</html>
After this super simple and affection solution for vertically centering a div. We move to another one that needs a bit more advanced CSS3 concept called: flexbox.
2. Use Flexbox Technique
If you haven’t heard of flexbox, then either you are living under a rock or you are not someone who designs or develops webpage even a bit.
Why? Because Flexbox is the go-to way to design in CSS3.
Unlike past “float” property which was highly unreliable in certain design situations. Flexbox as the name says is flexible in its CSS implementations.
Implement the code below to achieve the best version of the vertically centered div in a webpage.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center a div</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #f0f0f0;
}
.parent_main {
height: 100vh;
width: 100vw;
background-color: #34ace0;
display: flex;
align-items: center;
justify-content: center;
}
.child_sub {
width: 60vw;
height: 60vh;
background-color: #ff5252;
}
</style>
</head>
<body>
<div class="parent_main">
<div class="child_sub"></div>
</div>
</body>
</html>
Finally, we are going to use the most advanced and modern method to center a div in a webpage. For all modern developers/designers, I highly recommend it.
3. Use CSS Grid
CSS Grid is the latest weapon in CSS 3 arsenal. It’s cutting edge and highly code-friendly to use.
With CSS Grid doing tabular design is super easy to do. Check out this guide for a full understanding of the CSS Grid.
Similar to flexbox, Grid code is short and sweet without any jargon. But do remember that CSS grid works with only modern browsers like Chrome, Mozilla, and even Microsoft Edge support.
But the old IE version will not be grid-functional. So keep that in mind.
Go ahead and jump into the coding part:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center a div</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #f0f0f0;
}
.parent_main {
height: 100vh;
width: 100vw;
background-color: #34ace0;
display: grid;
justify-content: center;
align-content: center;
}
.child_sub {
width: 60vw;
height: 60vh;
background-color: #ff5252;
}
</style>
</head>
<body>
<div class="parent_main">
<div class="child_sub"></div>
</div>
</body>
</html>
Conclusion
I know for a fact as a Web Developer/Designer, that one of the most common HTML CSS design problems that people run into is centering divs on a web page.
It’s a problem that is faced by both beginners and experts alike. Hopefully, these 3 simple methods to vertically center a div without using any Javascript code and with the most advanced CSS 3 methods in 2022 will help you. Our code walkthrough should be easy enough to understand and implement for any developer or designer. If you feel any trouble feel free to comment or email us directly as well. We are dedicated to offering simple & clean solutions.
And if by any chance you are looking to jazz up your webpage with page scrolling animations with help of CSS and JavaScript, then read this article.
Ta-da friends! See you next time!
Be Problem Solver 
Leave a comment