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 13th July, 2015
Tags: CSS
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.

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

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

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

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

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

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.

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

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

Example
The inner div must have a max-width property.

Two divs, responsive

Two divs, the left with centered content. The right div is fixed to the top of the page. Works with almost every browser.
CSS
HTML
Example

See the Pen Two divs, responsive by Steve Pear () on CodePen.

Example
The content of the left div is centered using margin auto, with the padding property having a right value including the width property of the right div. The right div is displayed in front of the left div via the z-index property.

The right div is also made responsive using CSS media queries. When the screen size is less than 600 pixels, the right div is displayed below the left div.

The left div has its padding value reset, removing the width value of the right div. The right div has position changed to relative from fixed, and the width property set to the width of the page.

CSS

Elsewhere on Tipue

Tipue Search
jQuery

Tipue Search

Tipue Search is a site search engine jQuery plugin. It's free, open source, responsive and fast. Tipue Search only needs a browser that supports jQuery.
Tipr, a small and simple jQuery tooltip plugin
CSS
Beaty, a themed responsive CSS grid
The really simple guide to z-index
HTML5
Native HTML5 autocomplete with input list
© 2015, Tipue. Made in London.
PRIVACY
T&Cs