Centering a div is now a meme on internet but still to this day it is very common among software developers that they are not familiar either with all the ways or sometimes even with one. Having a knowledge of all these ways is a great asset in your skill set and efficiency as a web developer.
The 8 ways are given below with the CSS code (and HTML code just for one) that needs to be applied to the elements. The HTML document structure for all the examples is as below:
<div class="parent">
<div class="child">
Hello world!
</div>
</div>
- Position absolute
Centers both vertically and horizontally
Position absolute brings the element out of the normal document flow. Then then we shift the top edge of the element 50% (of the document height) to the bottom and similarly the left side 50% (of the document width) to the right.
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
- Margin auto
Centers only horizontally
If we set the width of parent element to the appropriate size, making the child element of a set width less than the parent element, we can set the margins to auto to center the div horizontally.
.parent {
width: 100%;
}
.child {
width: fit-content;
margin: 0 auto; /* 0 or anything for top and bottom but auto for left and right */
}
- Flexboxes
Centers both horizontally and vertically
If we make the parent as a flexbox. Then using justify-content: center; and align-items: center; we can center the div horizontally and vertically.
.parent {
display: flex;
justify-content: center;
align-items: center;
}
- Gird and place items
Centers both horizontally and vertically
Using place-items is a short hand for both align-items and justify-items. Now using this shorthand to center the div horizontally and vertically is very easy.
.parent {
display: grid;
place-items: center;
}
- Grid and place self
Centers both horizontally and vertically
Instead of centering all the elements in a div, we can center individual items as well. This is done using place-self: center;. This is a short hand for justify-self: center; and align-self: center;. You can use either one of them instead of place-items if you want to center in just a single direction.
.parent {
display: grid;
}
.child {
place-self: center;
}
- Margin auto with a grid
Centers both horizontally and vertically
We can use margin: auto; along with grid as well to center the div.
.parent {
display: grid;
}
.child {
margin: auto;
}
- Margin auto with a flexbox
Center both horizontally and vertically
We can use margin: auto; along with flexboxes as well to center the div.
.parent {
display: flex;
}
.child {
margin: auto;
}
- Using
Centers horizontally only
HTML hasn’t faded away and there exists this method of centering the elements <center> tag wrapped around the child element.
Unlike other methods, for this we will need to modify the HTML and not the CSS.
<div class="parent">
<center>
<div class="child">
Hello world!
</div>
</center>
</div>
Example of all the methods
To test out all the methods, here is a collective pen made just for this.
Conclusion
Centering a div is a thing we need to do a lot as a frontend developer. This is also a very trending meme.
So, save this article so that you can refer back to it whenever you need to center a div.
If you came this long, you must have liked the post. I highly recommend you to follow to never miss learning new and unknown things in the domain of web development. You can always unfollow if you don’t like it in the future.
Let’s get connected on linkedin: https://www.linkedin.com/in/sahil2004/
I post such amazing content there as well.
Top comments (0)