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

#css #webdev #beginners

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.

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.

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.

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.

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.

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 */

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'.

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 🤓