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