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.
Related articles across the web
Random articles
Angelina Fabbro talks about “CSS4” in this excellent conference video![[Link] Making a website vertically responsive](https://www.dev-metal.com/wp-content/uploads/2014/02/512px-Responsive_Web_Design_Logo.svg_-100x100.png)
[Link] Making a website vertically responsive
Adobe releases Firebug-like developer tools to edit and extract PSDs
Beautiful, minimal WordPress theme ZUKI by Elmastudio (with 30% discount)
Extremely easy SASS in Laravel (with pure PHP)![[german video] Modernizing and minimalizing frontend markup code at AutoScout24](https://www.dev-metal.com/wp-content/uploads/2014/03/sass-100x100.png)
[german video] Modernizing and minimalizing frontend markup code at AutoScout24
8 awesome pure CSS spinner / loader![[Link] Retinafy your Site / Device by Nijiko Yonskai](https://www.dev-metal.com/wp-content/uploads/2013/08/css3-chrome-font-100x100.jpg)
[Link] Retinafy your Site / Device by Nijiko Yonskai
An introduction into Atomic Design, a super-clean way to style web applications
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.