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

To center 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

<div class="container-1">
    <div class="center">
        Center box with text-align: center
    </div>
</div>

Css

.container-1{
   width: 750px;
   float: left;
   height: 400px;
   background-color: #25354c;
   text-align: center;
}

.container-1 .center{
   width: 200px;
   height: 200px;
   background-color: #ad4343;
   display: inline-block;
   font-size: 16px;
   color: white;
}

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 rule to code: 

- Parent tag needs to be set width clearly.
- Child tag must be set value margin left and right to the auto.
- Child tag can not set float left or right.

Html

<div class="container-2">
    <div class="center">
        Center box with margin auto
    </div>
</div>

Css

.container-2{
    width: 750px;
    float: left;
    height: 400px;
    background-color: #25354c;
}

.container-2 .center{
    width: 300px;
    height: 150px;
    background-color: #ccc;
    margin: 10px auto;
}

 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 position to relative.
- The child tag has to set position to absolute.
- The  child tag have set top, left, right, bottom equals 0. [required]
- The child tag must be set the margin to auto with four dimensions.

Html

<div class="container-3">
    <div class="center">
        Center box with margin auto
    </div>
</div>

Css

.container-3{
    width: 750px;
    float: left;
    height: 400px;
    background-color: #ad4343;
    position: relative;
}

.container-3 .center{
    width: 300px;
    height: 150px;
    background-color: #ccc;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

And below is the result :

* Note: In the above example, I align center with both horizontal & vertical dimensions. So if you only 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

<div class="container-4">
    <div class="center">
        Center box with flex
    </div>
</div>

Css

.container-4{
    width: 750px;
    float: left;
    height: 400px;
    background-color: blue;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container-4 .center{
    width: 300px;
    height: 150px;
    background-color: white;
}

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

<div class="container-5">
    <div class="center">
        Center box with transform
    </div>
</div>

Css

.container-5{
    width: 750px;
    float: left;
    height: 400px;
    background-color: blue;
}

.container-5 .center{
    width: 300px;
    height: 150px;
    background-color: white;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}

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

<div class="container-6">
    <div class="center">
        Center box with display table and vertical align
    </div>
</div>

Css

.container-6{
    width: 750px;
    height: 400px;
    background-color: cadetblue;
    display: table-cell;
    vertical-align: middle;
}

.container-6 .center{
    width: 300px;
    color: white;
    height: 150px;
    background-color: red;
    margin: auto;
}

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 only want to align center vertical:
-  You only need to change margin from auto to margin: 0;

7. Summary 

In this article, I guide 6 ways to center a div in CSS. You can use it to center any same tag in Html. If you have another way please comment below for discussion.

You can refer project code I uploaded into GitHub here.