DEV Community

loading...

Center Div Horizontally and Vertically 5 ways to center a div vertically and horizontally using CSS

ruphaa profile image Ruphaa ・3 min read

Alt Text

Every developer should have come across this task of centering a div in their lifetime at least once or every single day. We all have our handy technique but for beginners, it might be frustrating at times.
 
In this article, I have compiled a list of different CSS tricks to center a div horizontally and vertically center on a page, choose a trick or two, and make it your favorite.

Method 1: Using Flex

I wanted this technique to be on top since it's my favorite of all. In this trick, all the CSS properties are defined under the parent container.

We define the parent with display: flex property along with justify-content(horizontal placement by default) and align-items(vertical placement by default) center. These properties come with Flex specifications. One glitch to make this work is by providing a fixed width and height to the parent.

Alt Text

Method 2: Using Grid

Using CSS Grid, we can achieve our goal in two ways. First, using 'place-items' properties and second is by using 'align and justify self'. Yet again, these properties are exclusive to CSS Grid.

a) Using place-items, we provide the rules to the parent, and it alone does the magic. We give the parent 'display: grid' and 'place-items: center' and there you go, things get super centered.

Alt Text

b) Using 'justify and align-self', we provide the parent container with 'display: grid' property, and the main properties are given to the child container - 'align-self'(vertically placement) and 'justify-self'(horizontal placement) props are given center as value.

Alt Text

Method 3: Using CSS Positioning and CSS transform

This is one of the old school methods we follow to center elements on a page. We make the child container's position absolute to the parent container and move the child container to 50% from the top and left of the parent.

Alt Text

Method 4: Using CSS Margin

Yet another old school method works like a charm in all the browsers. All we have to do is define 'margin: 0 auto' style to the child container. I've personally faced some inconsistencies while trying this method, so I always add extra properties to center the elements.

Alt Text

Method 5: Using CSS Positioning

This is one of the common methods followed since the birth of 'CSS Positioning'. We make the child container 'absolute' to the parent and define top, left, right, and bottom properties '0' along with 'margin: auto'.

Note: CSS Inset - It's a shorthand for top, left, right and bottom property(currently this property is supported in Firefox only)

inset: 2px 3px 4px 5px /* top right bottom left */

Alt Text

Bonus Method: Using CSS Table

I know we all use the 'CSS table' widely across our application, which comes with plenty of table properties. I was surprised to find that we can use table property to center the content and elements in a container and it gets better we can do that in two ways.

We have to provide 'display: table' to the wrapper(which is a level above the parent), then we use 'display: table-cell' property in the parent.

The difference in two ways comes with child properties - one, is by using 'margin' property and the other using 'display: inline-block'.

Alt Text

Alt Text

We have reached the end of this article. I have attached a Codepen below, where you can find all of the above-mentioned tricks in one place, play around with it and share over here if you follow any cool tricks to center things.

I hope you find this article helpful and informative. If you like this article, give me a thumbs up 👍 Don't forget to bookmark it for future reference 🔖

Thanks for reading 🤓

Discussion

pic
Editor guide
Collapse
abodmicheal profile image
Abod Micheal (he/him)

Followed you down from twitter right to dev, nice article

Collapse
ruphaa profile image
Ruphaa Author

Thanks Abod 🤩

Collapse
sup profile image
Supratim

Thank you so much! I was struggling with centering things and this came to rescue.

Collapse
dimakzela profile image
Dimakatso

Nice article, I google with this almost everyday. I started believing that css is not for me :(

Collapse
ruphaa profile image
Ruphaa Author

Definitely not like that, initially it makes us cry, eventually you'll master it. I can guarantee you that 😉💪