Tutorials Tonight's Logo
Follow Us

How to center a div in CSS


As a web developer, one of the most common thing that you will most frequently need to do is to center a div element using CSS.

In this section, we will look at 15 different ways by which you can center a div horizontally and vertically on a webpage.


Let's see how you can align elements to center horizontally. We have discussed 5 different ways for it, of which margin auto and flexbox is the most commonly used method.

1. Center div using margin method

To center a div element horizontally you can simply use the margin property of CSS. It is the easiest way to align a div to center.

Give margin-left: auto and margin-right: auto to the element or you can use shorthand margin: 0 auto, this will automatically adjust the element to center of its parent element horizontally by leaving equal spaces to its left and right side.

Here is an example in which a child element is aligned to center using margin property.

.parent {
  padding: 20px;
  background: #7E89B4;
  border: 2px solid #4B5681;
}

.child {
  width: 200px;
  color: white;
  height: 100px;
  text-align: center;
  background: #353C5A;
  font-family: sans-serif;
}

.center {
  margin: 0 auto;
}

Here is the HTML code, the margin property is applied to the child element.

<div class="parent">
  <div class="child center">Child</div>
</div>

Note: To align any element to center horizontally you need to keep 2 things in mind:

  1. The element must be a block label element. If the display property of an element is inline or inline-block then it will not center using align property.
  2. The width of the element should be smaller than it's parent element. If the element is itself bigger than it's parent than will be unable to get equal spacing from it's left and right side and hence won't center.

2. Align center using flexbox

One of the best ways to align the div element to center horizontally is by using the flexbox.

Using flexbox you can position any element in 2D (horizontal and vertical). Here we will center horizontally.

First, add display: flex property to the parent of div element to make it a flex container, then use the justify-content property to aligning center.

Now add justify-content: center to align the parent element to center div horizontally.

Remember the flex property should be applied to the parent element. Here is the CSS code for example.

.parent {
  border: 2px solid #4B5681;
  background: #7E89B4;
  padding: 20px;
}

.child {
  height: 100px;
  width: 200px;
  background: #353C5A;
  font-family: sans-serif;
  text-align: center;
  color: white;
}

.center {
  display: flex;
  justify-content: center;
}

This is the HTML code.

<div class="parent center">
  <div class="child">Child</div>
</div>

3. Position absolute and margin auto

An element having an absolute position is like a floating element in the parent element. You can move it wherever you want.

To align the child element center horizontally you need to apply left: 0, right: 0 and margin-left: auto, margin-right: auto to the element (margin: 0 auto shorthand).

.parent {
  position: relative;
  border: 2px solid #4B5681;
  background: #7E89B4;
  height: 100px;
}

.child {
  position: absolute;
  left:0;
  right: 0;
  margin: 0 auto;
  height: 100px;
  width: 200px;
  background: #353C5A;
  font-family: sans-serif;
  text-align: center;
  color: white;
}

<div class="parent center">
  <div class="child">Child</div>
</div>

4. Center horizontally using position absolute and translateX

Using position property and translateX you can align element horizontally as well as vertically to center. Here we will see horizontal alignment.

For this, the position of the parent element should be relative and the position of the child element should be absolute.

.parent {
  position: relative;
}

.child {
  position: absolute;
}

Now, shift the child element 50% to its left.

This left shift of 50% will make the child element to start from midway to the right side of the parent element.

translateX 50% center horizontal

You can see in the above picture we want to center the box horizontally but it starts from the middle of the parent element. So we can apply the translateX property and move the child element 50% in a negative direction which will align it in center. Now add transform: translateX(-50%) to finally center the child element.

.parent {
  position: relative;
}

.child {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

This is the HTML code.

<div class="parent">
  <div class="child">Child</div>
</div>

5. Center using table

Using a table to design page layout is not used nowadays, but it's worth it to know that you can use this to center the element horizontally.

To center an element horizontally in the table use text-align: center to parent and display: inline-block to the child element.

To see the code in effect width of the child should be less than the parent element so we have set the parent width to 100vw for understanding purpose.

Here is HTML and CSS code as an example.

.parent {
  text-align: center;
  width: 100vw;
  border: 2px solid #4B5681;
  background: #7E89B4;
  height: 100px;
}

.child {
  display: inline-block;
  height: 100px;
  width: 200px;
  background: #353C5A;
  font-family: sans-serif;
  color: white;
}

<table>
  <tbody>
    <tr>
      <td class="parent">
        <div class="child">Child</div>
      </td>
    </tr>
  </tbody>
</table>

6. Using display table-cell

CSS enables us to change ordinary elements into the effect of table elements. Using this feature and concept used in the above approach you can center the element horizontally.

Set display: table-cell and text-align: center to the parent element and display: inline-block to the child element.

.parent {
  display: table-cell;
  text-align: center;
  width: 100vw;
  border: 2px solid #4B5681;
  background: #7E89B4;
  height: 100px;
}

.child {
  display: inline-block;
  height: 100px;
  width: 200px;
  background: #353C5A;
  font-family: sans-serif;
  color: white;
}

<div class="parent">
  <div class="child">Child</div>
</div>

Now we will see methods and modification of the above methods to align element in center vertically. For most cases you can refer above methods of horizontal alignment and add a few more property to center it vertically also, but anyway we will discuss in detail.


1. Vertical align using flexbox

Using flexbox you can align elements both in the horizontal and vertical direction. Here we will align element in the vertical direction.

First, you need to define display: flex to the parent element. Now the element inside this parent element becomes flex items.

To align child element vertically use align-items property and set its value as center.

.parent {
  display: flex;
  align-items: center;
  border: 2px solid #4B5681;
  background: #7E89B4;
  height: 200px;
}

.child {
  height: 100px;
  width: 200px;
  background: #353C5A;
  font-family: sans-serif;
  color: white;
}

<div class="parent">
  <div class="child">Child</div>
</div>

2. Absolute position and margin auto

We already know the element having an absolute position is can be moved very easily within the webpage. Using this we can also align to the center.

To align the child element center vertically you need to apply top: 0, bottom: 0 and margin-top: auto, margin-bottom: auto to the element (margin: auto 0 shorthand).

.parent {
  position: relative;
  border: 2px solid #4B5681;
  background: #7E89B4;
  height: 200px;
}

.child {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  height: 100px;
  width: 200px;
  background: #353C5A;
  font-family: sans-serif;
  text-align: center;
  color: white;
}

<div class="parent center">
  <div class="child">Child</div>
</div>

3. Using position absolute and translateY

In the same way, you centred the element horizontally using position absolute and translateX, you can use translateY to center the element vertically.

To do this set position: relative to the parent element and position: absolute to child element and top: 50%.

This will flow child element to start from verticle middle of the parent element, which is not center but you can use transform: translateY(-50%) to shift it up by 50% which will make it verticle align to center.

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

<div class="parent">
  <div class="child">Child</div>
</div>

4. Center vertically using table

As we have discussed above you can also use the table to create layout and center element (not recommended).

To center an element vertically in table use vertical-align: middle to parent and display: inline-block to the child element.

To see the code in effect height of the child should be less than the height parent element so we have set the parent height to 200px for understanding purpose.

.parent {
  vertical-align: middle;
  border: 2px solid #4B5681;
  background: #7E89B4;
  height: 200px;
}

.child {
  display: inline-block;
  height: 100px;
  width: 200px;
  background: #353C5A;
  font-family: sans-serif;
  color: white;
}

<table>
  <tbody>
    <tr>
      <td class="parent">
        <div class="child">Child</div>
      </td>
    </tr>
  </tbody>
</table>

5. Vertical align using display table-cell

By using CSS by changing element behaviours as the table you can use the above method without using table elements.

Set display: table-cell and text-align: center to the parent element and display: inline-block to the child element.

.parent {
  display: table-cell;
  vertical-align: middle;
  height: 200px;
  border: 2px solid #4B5681;
  background: #7E89B4;
}

.child {
  display: inline-block;
  height: 100px;
  width: 200px;
  background: #353C5A;
  font-family: sans-serif;
  color: white;
}

<div class="parent">
  <div class="child">Child</div>
</div>

Conclusion

You can use the above methods to center elements vertically or horizontally. You can also use the table method to center elements vertically or horizontally.

Best way to ceter elements both horizontally and vertically is to use flexbox.

If you want to center elements vertically or horizontally using table elements, you can use the above methods or use display: table-cell and text-align: center to the parent element and display: inline-block to the child element.

Points to remember:

  1. Flexbox is a modern way to layout element. It is recommended to use it to layout your elements in 2-dimension. Here is a complete guide to CSS flexbox.

More Learning

Want to learn more about programming and web development? We have a few recommendations for you.

Follow Us

Copyright © Tutorials Tonight. All Rights Are Reserved.