How to center a div tag in CSS — horizontal & vertical align

Center a div tag in css

If you are a programmer and familiar with CSS, you must know a very simple technique that is how to center a div in CSS?

To center align a div or any tag in CSS is often doing when you write code HTML and CSS. In this article, I will show you 6 ways to center a div in CSS. I only get the div tag to make an example, you can apply this solution for the same tags.

Explain some rules call:

• Parent tag: This parent tag contains a tag need center.
• Child tag: Tag needs align center.

1. Using text-align: center

To use text-align: center we need to notice something below:

• Parent tag must be a block tag and must set width property.
• Parent tag has to set text-align: center CSS. This property will help center child tags compare with the width of this tag.
• Child tag can not set float left or right property CSS and must be set width, the width should be less than parent tag.
• Important point child tag must be an inline-block tag (set display: inline-block;)

You can refer code below to understand how to center a div tag in CSS using text-align: center

Html

Css

And below is the result :

* Notice: this solution only centers horizontally not vertical child div tags. You also this way to center an image.

You can see a simple demo here.

2. Using margin auto.

Wow, this is the best way, I often use this way to center a div using CSS. It has the advantage of short code, easy to understand and easy to implement code.

Okay, now I will explain and make an example for you, the first it is ruled of code:

• The parent tag needs to be set width clearly.
• The child tag must be set value margin left and right to the auto.
• The child tag can not set float left or right.

Html

Css

margin: 10px auto : this mean is set margin top 10px, right auto, bottom 10px and left auto.

And below is the result :

* Notice: this solution only centers horizontally.

You can see a simple demo here.

3. Using position absolute.

With using the position you can align center a div tag with both horizontal & vertical dimensions or just one of two dimensions, it’s up to you.

Solution: We will use position, margin and some other properties to do.
We will have some rules as below:

• The parent tag must be set width clearly.
• The parent tag has to set the position to relative.
• The child tag has to set the position to absolute.
• The child tag has set the top, left, right, bottom equals 0. [required]
• The child tag must be set the margin to auto with four dimensions.

Css

And below is the result :

* Note: In the above example, I align center with both horizontal & vertical dimensions. So if you align center only horizontal you only change margin from auto to margin: 0 auto. Same if you want only align center vertical set margin : auto 0;

You can see a simple demo here.

4. Using display flex in CSS.

The display flex is a new property provided by CSS3. This defines a flex container; inline or block depending on the given value. It enables a flex context for all its direct children.

Html

Css

And below is the result :

You can see a simple demo here.

In this example, I align the center with both horizontal & vertical dimensions.

If you only want to align center horizontal:
- Change the value of align-items to flex-start to center horizontal top.
- Change the value of align-items to flex-end to center horizontal bottom.

Opposite if you want if you only want to align center vertical:
- Change the value of justify-content to flex-start to center vertical left.
- Change the value of justify-content to flex-end to center vertical right.

5. Transform/Translate method.

This option has the same result as using position because you can align the center both horizontal & vertical dimensions or only a dimension you want. But it’s simpler.

Note: Don’t forget the transform property is of CSS 3. It does not support the version of the old browser.

Rule :
- Parent tag only set with & height.
- The child tag has set position to relative. This helps the child tag only display inside the parent box.
- The child tag has set top & left properties to 50%. This help push the child box to the middle of the parent box;
- The child tag has to set transform with translateY() and translateX() to -50%; This helps back left and right back -50% width of child tag.

Html

Css

And below is the result :

You can see a simple demo here.

*Note: If you only want to align center vertical:
- Remove left: 50% property.
- Remove translateX(-50%) value of transform property.

Opposite if you want if you only want to align center horizontal:
- Remove top: 50% property.
- Remove translateY(-50%) value of transform property.

6. Display table & vertical-align.

This solution can apply for text, image and block tag but this solution is often used for text in the table.

Html

Css

And below is the result:

You can see a simple demo here.

*Note: If you only want to align center horizontal:
- Change vertical-align to top value to align the center horizontal top.
- Change vertical-align to bottom value to align the center horizontal bottom.

Opposite if you want if you only want to align center vertical:
- You only need to change margin from auto to margin: 0;

Thank you for reading. You can refer more to the original article of Quizdeveloper.com blog below. This article was written by Do Dung.

How to center a div tag in CSS - horizontal & vertical align