How to Center a Div in CSS? 3 Ways to Center Div
3 Ways to Center Div Using CSS
Hey friends, today I’ll teach how to center any div in CSS using 3 methods in 3 sections. Now when making web development projects or components for your website, you often need to center certain items or elements of the website. The easiest way to do it is by assigning a div class for your HTML element and then styling the div class in CSS.
1. Aligning Div Horizontally
First, we will learn how to align horizontally. There are several methods for this such as below:
Text-align center HTML
 text-align: center;
50+ HTML, CSS & JavaScript Projects With Source Code
Used to align text horizontally easily. For this, add the following code in the CSS of your div class, text-align: center; The sample output would be:
Flex Display
If you’re familiar here reading articles at the CodewithRandom blog, you might know I’ve written an article on flexbox before which I recommend you to read at here. Use the flex display code below and justify-content property to align the center horizontally. The code would be,
display: flex; justify-content: center;
Your output would be the same as earlier:
2. Aligning Vertically
Now that you know how to align the center horizontally, let’s see how to do it vertically and lastly both together (perfect center).
The classical positioning
This method is a very classical and basic method to align the center vertically. Add the following codes below:
<div class="container"> Â <div class="child"></div> </div>
.container { Â position: relative; } .child { Â width: 50px; Â height: 50px; border-radius:10px; Â background-color: blue; Â /* Center vertically */ Â position: absolute; Â top: 50%; }
Alright, this method earlier is very beginner-friendly but not really good practice for professionals. So, now we will start upgrading our methods slowly at a smooth pace.
Transform and Translate
We use the same code as earlier for this but with a change of the following in CSS.
.container { Â position: relative; } .child { Â width: 50px; Â height: 50px; border-radius:10px; Â background-color: blue; Â /* Center vertically */ Â Â position: absolute; Â top: 50%; Â transform: translate(0, -50%); }
Now, we will use the flex display method instead. Add the following instead in CSS for the main/parent div class (container):
.container { Â display: flex; Â align-items: center; }
The output would become:
100+ JavaScript Projects With Source Code ( Beginners to Advanced)
3. Aligning Center Vertically and horizontally (perfect center)
This is the main challenge people struggle with. However, with our knowledge earlier, we can definitely complete this. We will use our high-end skills by using flex for this(even though there are some rookie/amateur methods too)
Add the following code instead for the parent/main class (container):
.container { Â display: flex; Â justify-content: center; Â align-items: center; }
And your output would be:
ADVERTISEMENT
You may also use other methods such as the basic position method, and the transform and scale method based on what you learned in sections 1 and 2.
ADVERTISEMENT
I hope you now can center a div or any object in CSS using these 3 methods listed in the 3 sections.
ADVERTISEMENT
5+ HTML CSS Projects With Source Code
ADVERTISEMENT
Thank You!
ADVERTISEMENT
comment down below any doubts or suggestions you have. I hope this post was useful and thanks to Code With Random for giving me the chance to write here I hope to see you all in future posts. Goodbye!
Written by: @codingporium