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.