How to Horizontally Center Div in CSS

Often web developers need to horizontally and vertically center div on web pages. This is commonly required to make your website look more appealing and aesthetic. In fact, they need to center many different HTML elements, no just div, on their website. But often developers do not know how to center div and other HTML elements on their website. There are several simple ways to do this. In this article, we will learn how to horizontally center div in CSS. You can use these solutions to center other HTML elements also.

How to Horizontally Center Div in CSS

Let us say you have the following divs – one inner div with id=inner and the other outer div with id=outer. Let us say you want to center the inner div inside the outer div. We will look at how to center the div both horizontally as well as vertically.

<div id="outer">
  <div id="inner">hello world</div>
</div>

Let us look at the some of the common ways to easily center div inside another div, using CSS.

1. Using Flexbox

Nowadays most web browsers support display:flex property that allows you to set a div or container to be a flexbox element. A flexbox allows you to design elements with flexible layouts where you can position inner elements easily, without manually setting its position in a fixed manner. They self adjust on devices and support responsive web design. For our purpose, we just need to add 2 properties to CSS styling of outer div.

#outer {
  display: flex;
  justify-content: center;
}

In this case, the inner div may or may not have a width property defined. In the above case, the inner div will only occupy as much space as required for the text. In the following example, the inner div occupies 50% width as that of outer div.

#outer {
  display: flex;
  justify-content: center;
}

#inner {
 width:50%;
}

2. Using Fixed With Div

If your inner div has a fixed width, say, 300px, then you can set its margin CSS property to auto, to horizontally center it. Here is an example.

#inner {
  width: 300px;
  margin: auto;
}

In this case, the outer div does not need any other formatting. But your inner div must have a fixed non-zero width for this method to work.

3. Using Variable Width Div

If your inner div only takes up a fraction of your outer div, then you can use ‘margin:0 auto’ CSS property to horizontally center the inner div.

#inner {
  width: 50%;
  margin: 0 auto;
}

In the above code, the inner div automatically occupies 50% of width of its outer div. The margin property is what does the centering. In this case, the inner width is flexible and not fixed and auto adjusts according to the outer div.

For older web browsers such as IE8, you may need to tweak the above setting to the following.

#inner {
  display: table;
  margin: 0 auto;
}

In this case, the inner div will occupy only the space required by the text and nothing more, since we have not specified the width property.

In all cases, your inner div needs to have a non-zero flexible width for this solution to work.

4. Using text-align property

text-align is a popular CSS property used by web developers to horizontally center text in a paragraph, div or other elements. If you set this property to center in outer div, then all inner elements are horizontally centered. This can also be used to horizontally center div inside another div.

#inner {
 width:50%;
 display:inline-block;
}

#outer {
  text-align: center;
}

In the above code, we set text-align:center property on outer div. We also set inner div to display:inline-block with width 50%.

5. Using left property

This is another old school way of horizontally centering elements. In this approach, we set the position property of inner div to absolute, instead of relative as in all other cases. This means the position of inner div is independent of all other elements on the page, including the outer div. We further use left property to specify how much offset space to leave to the left of the item. Here is an example to set left property to 50% to horizontally center it.

#inner {
  position:absolute;
  left:50%;
}

The inner div may or may not have any width. If you also want to vertically center the inner div, use top property to specify the top offset of the inner div. Here is an example to set top property to 50% vertically centering it.

#inner {
   position:absolute;
   left:50%;
   width:300px;
   top:50%;
}

6. Vertically Center Div

In most cases, you may also need to vertically center the inner div, in addition to horizontally centering it. You can do this by setting the height, display and align-items properties of outer div.

#outer {
  height:100%;
  display: flex;
  align-items: center;
}

In this case, we set the outer div to be flex box. Further, we set its height to be 100%. You need to compulsorily set the height property of outer div, either to fixed or variable value. Otherwise, this solution will not work. Lastly, we set the align-items property to center. Please note, the align-items property works only if you set the display property of outer div to flex.

7. Horizontally and Vertically Center Div

Combining the solutions #1 and #5, we can horizontally and vertically center inner div using the following properties.

#outer {
  height:100%;
  display:flex;
  justify-content:center;
  align-items: center;
}

In this case, the justify-content property horizontally aligns inner div whereas the align-items & height property vertically center the div. Please note, the justify-content and align-items properties work only if you set the outer div’s display property to flex.

Conclusion

In this article, we have learnt several simple ways to easily center a div inside another div. You can use any of these methods as per your requirement. We have learnt how to horizontally and vertically center div by setting outer div to be a flexbox. We have also learnt other ways of horizontally centering elements using margin, fixed width and variable width properties.

FAQ

1. Do these solutions work on all web browsers?

Yes. Unless specified otherwise, as in case of IE 8, these solutions work on all web browsers. They use standard CSS properties that are supported by all major web browsers.

2. Do you need to use JavaScript or another CSS Library for this purpose?

No. You can horizontally and vertically center HTML elements using plain CSS. You do not need any JavaScript or CSS libraries for this purpose.

Also read:

How to Change HTML Input Placeholder color
How to Detect Click Outside Element in JavaScript
How to Know Which Radio Button is Selected via jQuery