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.
Buenas tardes, encantado de saludarte. Soy Jose
Quería escribirte porque me ha parecido interesante comentar contigo la posibilidad de que tu negocio aparezca cada mes en periódicos digitales como noticia para posicionar en los primeros lugares de internet, es decir, con artículos reales dentro del periódico que no se marcan como publicidad y que no se borran.
La noticia es publicada por más de cuarenta periódicos de gran autoridad para mejorar el posicionamiento de tu web y la reputación.
¿Podrías facilitarme un teléfono para ofrecerte un mes gratuito?
Gracias
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.