The complete guide to centering a div

Every developer inevitably finds that centering a div isn't as obvious as you'd expect. Centering what's inside a div horizontally is easy 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 and/or vertically. And within the page, a div or any element.

Centering a div in a page, basic

This method works with just about every browser, ever.

CSS

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

HTML

<div class="center-div"></div>

Example

See the Pen Centering a div in a page, basic by Steve Pear () on CodePen.

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.

CSS

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

HTML

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

Example

See the Pen Centering a div within a div, old-school by Steve Pear () on CodePen.

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

CSS

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

HTML

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

Example

See the Pen Centering a div within a div with inline-block by Steve Pear () on CodePen.

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

CSS

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

HTML

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

Example

See the Pen Centering a div within a div, horizontally and vertically by Steve Pear () on CodePen.

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

Vertical center in a div with transform

This uses transform to center any content in a div vertically. This method uses an HTML empty element as a container, in this case p. You can wrap a lot in an empty element.

Transform is supported by Chrome 63+, IE11, Microsoft Edge 16+, Firefox 57+, Safari 11+, iOS Safari 11.2+ and Chrome for Android 62+.

CSS

.center-div p
{
     position: relative;
     top: 50%;
     transform: perspective(1px) translateY(-50%);
}

HTML

<div class="center-div"><p>Esse augue dolor</p></div>

Example

See the Pen Vertical center in a div with transform by Tipue () on CodePen.

The perspective value reduces blurring on high definition displays. You can support older browser releases using vendor prefixes for transform, such as -webkit-transform and -ms-transform. The later will go as low as IE9.

Centering a div at the bottom of a page

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

CSS

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

HTML

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

Example

See the Pen Centering a div at the bottom of a page by Steve Pear () on CodePen.

The inner div must have a width property. The gap from the 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 div. It works with all browsers.

CSS

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

Example

See the Pen Centering a div in a page, horizontally and vertically by Steve Pear () on CodePen.

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.

CSS

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

Example

See the Pen Centering a div in a page, responsive by Steve Pear () on CodePen.

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

CSS

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

HTML

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

Example

See the Pen Centering a div within a div, inner div responsive by Steve Pear () on CodePen.

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

CSS

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

HTML

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

Example

See the Pen Centering two responsive divs, side by side by Steve Pear () on CodePen.

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

Flexbox is supported by Chrome 63+, IE11, Microsoft Edge 16+, Firefox 57+, Safari 11+, iOS Safari 11.2+ and Chrome for Android 62+.

CSS

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

HTML

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

Example

See the Pen Flexbox, div centered by Steve Pear () on CodePen.

The height property in the container can be anything, as long as it's larger than the centered div. In this example we're using vh, which is the height of the browser window, the viewport, rather than the height of the page. For more on viewport values and their uses see Using vw and vh.

Centering a dynamic div, horizontally and vertically

This method uses the display property with a table value, making it behave like a table element, centering a div both horizontally and vertically. The centered div can have dynamic content, that is, any height or width. It can be responsive.

Table display is supported by Chrome 63+, IE11, Microsoft Edge 16+, Firefox 57+, Safari 11+, iOS Safari 11.2+ and Chrome for Android 62+.

CSS

.outer-div
{
     display: table;
     position: absolute;
     height: 100%;
     width: 100%;
}
.mid-div
{
     display: table-cell;
     vertical-align: middle;
}
.center-div
{
     margin: 0 auto;
     width: 300px;
     height: 100px;
}

HTML

<div class="outer-div"><div class="mid-div"><div class="center-div"></div></div></div>

Example

See the Pen Centering a dynamic div, horizontally and vertically by Tipue () on CodePen.

The width and height properties in the centered div can be anything.

Before you go

For more articles like this, and to help us develop our open source plugins, we need your help. Please donate.

Donate

Latest & featured

Change Background Image on Scroll. A cool change of the CSS background-image property with a few lines of JavaScript.

Playing with CSS Sticky Positioning. The sticky element maintains its position only within its containing block.

Playing with CSS Contenteditable. Adding the contenteditable attribute to almost any HTML element makes it editable. This allows you to create richer forms.

CSS Animated Pulse Buttons using Box Shadow. On-trend pulse buttons using CSS animations, keyframes and box-shadow.

Playing with CSS Background Clip & Text. The CSS background clip property with a text value can add a urbane dash of creativity.

Hacking CSS Writing Mode. While meant for multilingual purposes, the CSS writing-mode property can be exploited for design.

Cool CSS Radio Buttons and Checkboxes. Hip and easy radio button and checkbox form elements styled with CSS.

Products / Grids / Blog
Twitter