How to center a div vertically and horizontally (modern methods, without fixed size!)

“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
Result
See the Pen baity by Panique (@Panique) on CodePen.
Thank you, very usefull
exactly wt i was looking for ..you saved my ass ..ty
it only works in IE11
I dropped a key word in my comment – meant to say “I just used a element inside a
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 ?!
Thanks! Clean and simple.
**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
Okay, but this article is about when you DON’T have the height/width.
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
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.
It seems i have to run in quirks mode in IE to get it to work there.
Genius! Thanks!
Thank you very much! I like this method even though I hate using tables. Old technology still serves a purpose.
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.