How to center a div (vertically and horizontally, IE8+)

“How to center a div” (inside another div or inside the body itself) is one of the most discussed questions ever, and to my surprise there are masses of tutorials which totally over-complicated this issue, usually also with lots of disadvantages, like a fixed height and width of the content div. However, there’s a simple, non-hacky, clean, responsive-ready and crossbrowser-safe method that also does not need any fixed pixel size div settings:

Totally crossbrowser-safe. Works in all browsers (IE8 and higher).
Totally liquid, no div size needed
Totally clean, no weird hacks. All code is used the way it should be used.

Method 1:
Center a div in the middle of the viewport

CSS

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: table;
}
.container {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.content {
    background-color: red; /* just for the demo */
    display: inline-block;
    text-align: left;
}

HTML

<div class="container">
    <div class="content">
        content content content 
        <br/>
        moooooooooooooooore content
        <br/>
        another content
    </div>
</div>

Result

See the JSFiddle here: http://jsfiddle.net/panique/pqDQB/35/

Method 2:
Center div vertically and horizontally inside an other div

This is very useful for situation when you have to center content inside a div that don’t have a certain pixel size. Please note that this really doesn’t need ANY pixel size definition. For demo purposes we give the parent div demo pixel sizes, just to create a visible example.

CSS

.parent {
    display: table;
    /* optional, just for the demo */
    height: 300px;
    background: yellow;  
}
.child {
    display: table-cell;
    vertical-align: middle;
    /* optional, just for the demo */
    background: red;	
}
.content {
    /* optional, just for the demo */
    background: blue;
}

HTML

XXX

Result

See the Pen baity by Panique (@Panique) on CodePen.

This article was written quite a while ago (4 years), please keep this in mind when using the information written here. Links, code and commands might be outdated or broken.

Random articles

CSS CSS3

15 Comments

Ihor Kalashnikov

March 24, 2016 7:13 pm

Thank you, very usefull

Reply
Anuj

February 5, 2016 9:51 am

exactly wt i was looking for ..you saved my ass ..ty

Reply
chai

April 21, 2015 7:06 am

it only works in IE11

Reply
Andy

October 15, 2014 12:31 pm

I dropped a key word in my comment – meant to say “I just used a element inside a

Reply
Andy

October 15, 2014 12:29 pm

I tried to implement the solution in this article within an existing structured page but adding the display:table and display:table-cell ‘hacks’ just messed up my layout.

I just used a element inside a and that did the job just fine. Why hack a div to misbehave when you can just use span out the box ?!

Reply
Kiwitrix

September 24, 2014 11:01 pm

Thanks! Clean and simple.

Reply
Arsh

July 27, 2014 10:07 pm

**I have been using the following solution (with no positioning and no line height) since over a year, it works with IE 7 and 8 as well.**

.outer {
font-size: 0;
width: 400px;
height: 400px;
background: orange;
text-align: center;
display: inline-block;
}

.outer .emptyDiv {
height: 100%;
background: orange;
visibility: collapse;
}

.outer .inner {
padding: 10px;
background: red;
font: bold 12px Arial;
}

.verticalCenter {
display: inline-block;
*display: inline;
zoom: 1;
vertical-align: middle;
}

Line 1
Line 2

Reply
- Chris
  
  July 27, 2014 10:26 pm
  
  Okay, but this article is about when you DON’T have the height/width.
  
  Reply
Dell Mercant

May 6, 2014 8:41 am

faster way…

.exactCenter {
width:200px;
height:200px;
position: fixed;
background-color: #00FF00;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}

More about….Div on center of page

bradny

Reply
- Chris
  
  May 6, 2014 11:32 am
  
  Please note: This article is about NON-FIXED size divs! Especially for responsive and liquid sites it’s quite often not possible to give a size.
  
  Reply
Dave

March 27, 2014 4:02 pm

It seems i have to run in quirks mode in IE to get it to work there.

Reply
Joaquin Rotharmel

February 1, 2014 12:27 am

Genius! Thanks!

Reply
Brian

November 26, 2013 7:18 pm

Thank you very much! I like this method even though I hate using tables. Old technology still serves a purpose.

Reply
- Chris
  
  November 26, 2013 8:23 pm
  
  Thanks, but I would like to add that display: table-cell; was first introduced in 2010 (!), so it’s a very new technology, not an old one. Class tables are something totally different.
  
  Reply