September 26, 2013
Chris
15

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

css

“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:

  1. Totally crossbrowser-safe. Works in all browsers (IE8 and higher).
  2. Totally liquid, no div size needed
  3. 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

center-a-div-horizontally-and-vertically

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.

Related articles across the web

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

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

Leave A Comment