Four effective ways to center a div in CSS

We will use positions, margin,text-align property, and finally, the flexbox property of CSS to center our div on DOM

Photo by Pankaj Patel on Unsplash

We all had times when we need to center a div on our DOM but we don’t know how to do it. Even when we implement some way of doing that, we still don’t get the desired result and our UI breaks down. In this article, I will give you the necessary tips which would help you in making beautiful designs without breaking the UI.

Creating the required HTML and CSS for our project

Creating the HTML of the project

Firstly, we have to make our div which will be centered using CSS. For that, we have to make an HTML file and connect it to CSS.

This HTML markup contains our div which is to be centered and it is linked to our CSS file(style.css).

The basic style of the project

Now we head on to the ways with which we can center our div. The basic style of our div is this. Here I made a div of height and width of 200px and the background color red. I have also set the margin and padding of the whole HTML as 0, but it is a matter of personal preference.

1:) CSS position property for centering a div

This approach was used a lot in the earlier times of CSS to center a div on the page. In this, the div is given an absolute position so that it can be taken out of the natural flow of the document. The top left corner of the div is then placed at the center of the page by moving it 50% from the top and left. Now, we will move the div towards the top by 50% of its height and to the left with 50% of its width by translate(-50%,-50%). This way, the center of the div will coincide with the center of the page. This is what our page is looking for now.

div is centered on the page horizontally and vertically

2:)Centering the div with margin property

This approach is useful for some text or some div that you want to center just horizontally. Here is how you need to do this:-

In this approach, the div set its margin automatically according to the space it has on the DOM. The only caveat it has is that it only works for block elements so it will fail for any inline or inline-block elements as they only take up necessary space on DOM, while block elements take up the entire space of the DOM horizontally. This is how it is looking in our project:-

Div is centered horizontally on the DOM

3:) Div is centered using flexbox property

So guys, now we are going to take the latest approach to center a div in CSS which is flexbox. It makes a horizontal margin and a vertical margin which divides the page into four quadrants with the center of the page as the origin.

This is a flexbox container

The horizontal margin is called the main axis and, the vertical margin is called the cross-axis. To make a flex container you have to set the display of the parent element to flex and you also have to hardcode the height and width of the parent element. This is how you will make a flex container.

This is how an element is made into a flex container

We have converted our body into a flex container and given it a height of 100viewport height while its width is 100viewport width. We can center a div horizontally with the justify-content property set to center. It centers a div on the main axis of the flex container. To center the div vertically we use the align-items property set to center. It centers a div on the cross axis of the flex container. This is our div again centered on the center of the page.

This div is centered using the flexbox property

4:) To center text in a div

All of the above tips still work on text elements but there is one property that is made just for text elements. If you set the text-align property to center then the text inside our div will be centered. Here is how to do it.

Setting text-align center to the div

This method lets you center not only text but also any inline or inline-block element. Here is how our text looks inside our div

Text centered inside the div

Conclusion

These are some of the ways with which you can center an element inside its parent element. Although there are other ways you can center elements, these methods are the easiest to execute and there is a low chance of error which can break your UI. Hope you enjoyed it😊.