TipueLondon

Home

jQuery

CSS

HTML5

Other

Support

Shop

About & Contact

The complete guide to centering a div

any div can be centered - horizontally, vertically or both

The complete guide to centering a div

First published 2nd Feb, 2014. Updated 19th Oct, 2015
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.
CSS
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
HTML
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 reasonably modern browsers, including IE8.
CSS
HTML
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 all modern browsers.
CSS
HTML
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.

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.
CSS
HTML
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 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.
CSS
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
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 almost every browser.
CSS
HTML
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 modern browser.
CSS
HTML
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 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+.

CSS
HTML
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.
© 2016, Tipue. Made in London.
About   Privacy   T&Cs