As a web developer or anyone that deals with the frontend of any application, I am very sure you have encountered the challenge of having to center a div. If you are reading this article, then I want to assume you already know what a div is. It's not alien to web developers, let alone anyone that deals with the frontend of an application whether they be mobile applications or web applications. I am sure you would have come across a lot of articles talking about this topic, but I bet you, this one will strike a cord of understanding in you.
What is it we mean by a div? Well, like I said earlier, most web developers know what it is, but if you are just learning web development, then I'll explain it in a simpler way to you. A div is the primary tag responsible for building the layout of an application. It is a block-level HTML element that helps serve as the foundational design structure for any application and is then applied in CSS for the actual positioning of how you want the layout of the application to look. It is a very valuable skill all developers must possess, but sadly, not a lot of developers can correctly center a div. Let's get into the actual action.
USING margin: auto
This method is used to center the div horizontally; i.e on the y-axis. This method isn't used by a lot of developers. Let's see how the code works.
We will be creating our HTML with two div elements. One is for the container and the other, the div we want to center.
<div class="container">
<div class="center">
<h3>I want to center the div with the class name</h3>
</div>
</div>
And then in the CSS, I styled it moderately so the difference can be glaring. The div-container with a background of blue, and I made it slightly bigger so you can see the div with the class name center inside.
.div-container {
background-color: blue;
width: 40vw;
height: 4em;
}
.center {
background-color: aliceblue;
width: 20vw;
}
This will be the output without attempting to use the margin property.
This way you can see the div with the class name center and background color of aliceblue is positioned at the top left position of its parent div div-container. That's how children divs are originally positioned within the parent div until other measures are used to center them.
Now, let's apply our margin property to center the center div inside of the div-container.
.center {
background-color: aliceblue;
width: 20vw;
margin: auto;
}
With the margin changes in our center div, let's see the magic that has been done.
Now, we can see that with the slight change in our center div, the div was positioned in the center of its parent.
USING Flexbox:
This is one of the two frequently used methods by most developers. This method helps center the div both horizontally (y-axis) and vertically (x-axis). Using the same HTML as above, we will style this one differently using the flexbox properties to achieve our goal. Let's see how this works.
.div-container {
display: flex;
justify-content: center;
background-color: blue;
width: 40vw;
height: 4em;
}
.center {
background-color: aliceblue;
width: 20vw;
}
As you can see, we used the flexbox properties to display and justify our divs. Using this method, the parent div div-container will display its children elements in flex. display: flex will align the children's div horizontally, while justify-content: center will align the div or its items in the center of the container.
USING text-align: center:
Another way to center text in a div is by using the text-align property. This aligns all the text in the said div in the center. This method centers the text horizontally. Let's take a look.
.div-container {
background-color: blue;
width: 40vw;
height: 4em;
}
.center h3 {
background-color: aliceblue;
text-align: center;
}
The output of this can be seen below.
USING gridbox:
This is the second most used method that developers use to center a div. It's close to using the flexbox. It shares the justify-content property as well. Let's see how it works.
.div-container {
display: grid;
justify-content: center;
background-color: blue;
width: 40vw;
height: 4em;
}
.center {
background-color: aliceblue;
width: 20vw;
}
It returns the same output as the flexbox by aligning the div in the center both horizontally and vertically.
USING padding:
Same way margin can be used to center a div, padding can do the same. You just need to be able to set the div accurately both horizontally and vertically. In our next code, we will set the div in the center using accurate padding about the size of the container.
.div-container {
background-color: blue;
width: 400px;
height: 200px;
}
.center h3 {
background-color: aliceblue;
padding: 2.5em;
}
We used the padding to set the text container in the center of its div horizontally, and that's because we know the accurate measurement of padding that needs to be allotted to achieve that. Sometimes you may need to use the padding-top, padding-right, padding-bottom and padding-left properties to achieve the correct value of padding we need to center the div both horizontally and vertically or however we want. Let's see the result of the above code.
I will advise you to use less of padding to center a div, because they can always break out of the div, and they are not as fluid as the flexbox and gridbox.
I hope this tutorial has been helpful. If Yes, you can like and follow me.
Thanks and have a great day.