This is a common problem that beginners face which seems to have no particular solution because there are many ways to achieve this. For almost every project I did, when starting out, I was searching the internet whenever I wanted to centre a div both horizontally and/or vertically. I came across one really easy way to achieve this while I was doing an online course, and I have since decided to stick to this method(using the flexbox) except in distinct cases.
In this article, I would describe how a div which is on a page, inside another element or div can be:
- Centred vertically
- Centered horizontally
- Centred both vertically and horizontally
Centering a div vertically
To center a div vertically, you do this:
<!-- I want to center the div with a class of shape-->
<html>
<head>
<style>
.shape{
width: 100px;
height: 100px;
background: green;
}
</style>
</head>
<body class="container"><!--This is the parent element-->
<div class="shape"></div><!-- This is the div to center-->
</body>
</html>
The code above gives this as an output:
From the image above, we see that the 'shape' div is not centered vertically, to achieve this:
- Add 'display: flex' and
- Add 'align-items: center' to the parent element which is the '.container' , as shown below:
<head>
<style>
.shape{
background: green;
}
.container{
display: flex;
align-items: center;
}
/* The properties are added to the 'container' parent element */
</style>
</head>
<body class="container"><!--This is the parent element-->
<div class="shape"></div><!-- This is the div to center-->
</body>
This is the output:
The 'shape' div has been centered vertically. Next, we horizontally center the div.
Centering the div horizontally
We follow the same steps above to horizontally center the div except that we now use 'justify-content: center' instead of 'align-items: center'
- Adding the 'display: flex' and
- Adding 'justify-content: center' to the CSS properties of the parent element which is '.container' here.
This is shown in the code below:
<head>
<style>
.shape{
background: green;
}
.container{
display: flex;
justify-content: center;
}
/* The properties are added to the 'container' parent element */
</style>
</head>
<body class="container"><!--This is the parent element-->
<div class="shape"></div><!-- This is the div to center-->
</body>
The output below shows a div which has been centered horizontally:
Next, we center the div both horizontally and vertically
Centering the div both horizontally and vertically
This is a combination of the two initial steps, we achieve this by:
- Adding the 'display: flex'
- Adding the 'align-items: center'
- Adding the 'justify-content: center'
This is shown below:
<head>
<style>
.shape{
background: green;
}
.container{
display: flex;
align-items: center;
justify-content: center;
}
/* The properties are added to the 'container' parent element */
</style>
</head>
<body class="container"><!--This is the parent element-->
<div class="shape"></div><!-- This is the div to center-->
</body>
The output is shown here:
We see that the div is now centered both vertically and horizontally.
Thanks for reading this! I hope it was really helpful, I would love to hear your comments.
Top comments (0)