5 ways to center a div vertically and horizontally using CSS
Tags: css, webdev, beginners
Published: 2020-05-31 15:35:34

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/w6g6lk4ysz6cy3bv9cg2.png)

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](https://dev-to-uploads.s3.amazonaws.com/i/d1yboppbijfik58nm8ax.png)

### **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](https://dev-to-uploads.s3.amazonaws.com/i/pdg93ejwzoese5dpwu4d.png)

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](https://dev-to-uploads.s3.amazonaws.com/i/uerf3tkkj37j7hsvllt6.png)

### **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](https://dev-to-uploads.s3.amazonaws.com/i/18f9nnunoe6iwxu1boa0.png)

### **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](https://dev-to-uploads.s3.amazonaws.com/i/cnvo7unu19clnn3b55nx.png)

### **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](https://dev-to-uploads.s3.amazonaws.com/i/90ohfgy77bha7b7bzwbd.png)

### **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](https://dev-to-uploads.s3.amazonaws.com/i/ml1ei0nxos3tydyf4hig.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/k6b71bct2q5acxti0x4q.png)

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.

{% codepen https://codepen.io/ruphaa/pen/vYNwBoG default-tab=css,result %}

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 🤓