Every new developer inevitably finds that centering a div isn’t as obvious as you’d expect. Centering what’s inside a div is easy enough by giving the text-align property a value of center, but then things tend to get a bit sticky. When you get to centering a div vertically, you can end up in a world of CSS hurt.The aim of this article is to show how, with a few CSS tricks, any div can be centered; horizontally, vertically or both. And within the page or a div.

Centering a div in a page, basic

This method works with just about every browser, ever.

.center-div
{
     margin: 0 auto;
     width: 100px; 
}

The value auto in the margin property sets the left and right margins to the available space within the page. The thing to remember is your centered div must have a width property.

Centering a div within a div, old-school

This method works with just about every browser.

<div class="outer-div">
  <div class="inner-div">
  </div>
</div>

.outer-div
{
     padding: 30px;
}
.inner-div
{
     margin: 0 auto;
     width: 100px; 
}

The margin auto trick strikes again. The outer div can be disorderly, but the inner div must have a width property.

Centering a div within a div with inline-block

With this method the inner div doesn’t require a set width. It works with all reasonably modern browsers, including IE8.

<div class="outer-div">
  <div class="inner-div">
  </div>
</div>

.outer-div
{
     padding: 30px;
     text-align: center;
}
.inner-div
{
     display: inline-block;
     padding: 50px;
}

The text-align property only works on inline elements. The inline-block value displays the inner div as an inline element as well as a block, so the text-align property in the outer div centers the inner div.

Centering a div within a div, horizontally and vertically

This uses the margin auto trick to center a div both horizontally and vertically. It works with all modern browsers.

<div class="outer-div">
  <div class="inner-div">
  </div>
</div>

.outer-div
{
     padding: 30px;
}
.inner-div
{
     margin: auto;
     width: 100px;
     height: 100px;  
}

The inner div must have a width and height property. This doesn’t work if the outer div has a fixed height.

Centering a div at the bottom of a page

This uses margin auto and an absolute-positioned outer div. It works with all modern browsers.

<div class="outer-div">
  <div class="inner-div">
  </div>
</div>

.outer-div
{
     position: absolute;
     bottom: 30px;
     width: 100%;
}
.inner-div
{
     margin: 0 auto;
     width: 100px;
     height: 100px;
     background-color: #ccc;
}

The inner div must have a width property. The gap from the very bottom of the page is set in the outer div’s bottom property. You can also center a div at the top of a page, replacing the bottom property with top.

Centering a div in a page, horizontally and vertically

This uses margin auto again and an absolute-positioned outer div. It works with all modern browsers.

.center-div
{
     position: absolute;
     margin: auto;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     width: 100px;
     height: 100px;
}

The div must have a width and height property.

Centering a div in a page, responsive

The width of the div is responsive, in that it responds to the size of the viewport. It works with just about every browser.

.center-div
{
     margin: 0 auto;
     max-width: 700px;
}

Your centered div must have a max-width property.

Centering a div within a div, inner div responsive

The inner div is responsive. Works with almost every browser.

<div class="outer-div">
  <div class="inner-div">
  </div>
</div>

.outer-div
{
     padding: 30px;
}
.inner-div
{
     margin: 0 auto;
     max-width: 700px; 
}

The inner div must have a max-width property.

Centering two responsive divs, side by side

Two divs side by side, and both responsive. Works with every modern browser.

<div class="container">
  <div class="left-div"></div>
  <div class="right-div"></div>
</div>

.container
{
     text-align: center;
}
.left-div
{
     display: inline-block;
     max-width: 300px;
     vertical-align: top;
}
.right-div
{
     display: inline-block;
     max-width: 150px;
}
 screen and (max-width: 600px) 
{
     .left-div, .right-div
     {
        lef  max-width: 100%;
     }
}

Simply a couple of inline-block elements within a centered container. This also uses CSS media queries; when the screen size is less than 600 pixels, the max-width property of both left and right divs is set to 100%.

Flexbox, div centered

This centers a div both horizontally and vertically using Flexbox. The CSS3 Flexible Box Layout Module, aka Flexbox, aims to provide a CSS box model for user interface design. There’s plenty of Flexbox tutorials out there, and we’ve also played around.

Flexbox is supported by Chrome 38+, IE11 and Microsoft Edge, Firefox 38+, Safari 9+, Opera 30+, iOS Safari 9+ and Android Browser 40+.

<div class="container">
  <div class="item"></div>
<div>

.container
{
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100vh;
}
.item
{
     background-color: #f3f2ef;
     border-radius: 3px;
     width: 200px;
     height: 100px; 
}

The height property in the container can be anything, as long as it’s larger than the centered div.