Vertically centering a DIV within BODY using CSS

Question

I have read at least five articles on stackoverflow pertaining to this problem; as well as articles like this and this. It must be possible!

I have a div within my body that I would like vertically centered on my page. Like this:

<body>
    <div>I would like this to appear in the middle of the viewport.</div>
</body>

The second article above demonstrates its solution but their examples are divs inside other divs, which doesn't work for a div that you want centered within a body. I have tried having a div within a div and setting heights to 100% but that only annoyed my browser.

Please help! I don't want to have to resort to JQuery!

http://stackoverflow.com/questions/12771982/vertically-centering-a-div-in-body and http://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers — Mohamed-Yousef, Dec 01 '15 at 23:57
Thanks @Mohamed-Yousef, that first one did the trick. Pity I couldn't mark your answer as a solution. — serlingpa, Dec 02 '15 at 00:19

score 2 · Answer 1 · answered Dec 02 '15 at 00:06

Would be one of the possible solutions using absolute positioning:

html, body {
  height: 100%;
}
.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<body>
  <div class="center">I would like this to appear in the middle of the viewport.</div>
</body>

Or this using display: table

html,
body {
  height: 100%;
}
.container {
  height: 100%;
  width: 100%;
  display: table;
}
.wrapper {
  display: table-cell;
  height: 100%;
  vertical-align: middle;
}
}

<body>
  <div class="container">
    <div class="wrapper">
      I would like this to appear in the middle of the viewport.
    </div>
  </div>
</body>

score 0 · Answer 2 · answered Dec 02 '15 at 00:02

Try setting position to relative , setting text-align to center , top using css vh units to 45 or 50 , depending of height or line-height of div element

div {
  position:relative;
  top:45vh;
  text-align:center;
}

<body>
    <div>I would like this to appear in the middle of the viewport.</div>
</body>

score 0 · Answer 3 · answered Dec 02 '15 at 00:04

If you give the div a fixed height, then you can center it vertically using absolute positioning.

div {
    height:100px;
    position:absolute;
    top:50%;
    margin-top:-50px;
}

margin-top should be half of whatever your height is.

You can also vertically center a div of unspecified height if you wrap it in another div like so:

<div id="outer">
    <div id="inner">Some text here...</div>
</div>

#outer {
    height:100%;
    display:table;
}
#inner {
    display:table-cell;
    vertical-align:middle;
}

However, display:table and display:table-cell have less browser support.

score 0 · Answer 4 · answered Dec 02 '15 at 00:04

Just use flexbox:

body {
  display:flex;
  height:100vh;
  align-items:center;
  justify-content:center;
}
div {
  width:125px;
  border:1px solid black;
}

<body>
    <div>I would like this to appear in the middle of the viewport.</div>
</body>

If you intend to support IE10 you'll need some prefixing, for IE9 and below you'll need other solutions. Practically speaking today - just ignore IE10 and older unless a client pays you not to. People actually upgrade these days.

score 0 · Answer 5 · answered Dec 02 '15 at 00:17

there is 2 easy ways nowdays: the flex display option ( 3 lines of code in between html & body):

html {
  min-height:100%;
  display:flex;
  }
body {
  margin:auto;
  }
/* show me where it stands */
html {
  background:linear-gradient(to left, rgba(0,0,0,0.25) 50%, transparent 50%),linear-gradient(to top, rgba(0,0,0,0.25) 50%, transparent 50%);
  }
div {
  border:solid;
  }

<body>
    <div>I would like this to appear in the middle of the viewport.</div>
</body>

or the table display (IE8 included here):

html {
  height:100%;
  width:100%;
  table-layout:fixed; /*if  to avoy spreading over the 100% width */
  display:table;
  }
body {display:table-cell;
  vertical-align:middle;
  text-align:center;
  }
div {
  display:inline-block;
  }
/* show me where it stands */
html {
  background:linear-gradient(to left, rgba(0,0,0,0.25) 50%, transparent 50%),linear-gradient(to top, rgba(0,0,0,0.25) 50%, transparent 50%);
  }
div {
  border:solid;
  }

<body>
    <div>I would like this to appear in the middle of the viewport.</div>
</body>

score 0 · Answer 6 · answered Dec 02 '15 at 00:36

@serlingpa If ALL you have in your body is this one div that you want to centre vertically, then I have solution:

div {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
}

This can be seen at this jsfiddle: http://jsfiddle.net/Rwthwyn/1bo7rx2q/

To make transform work on older versions of some browsers, you'll need to add in prefixes (-moz- , -ms- , -o- , -webkit-) eg: -webkit-transform: translateY(-50%) etc.

Vertically centering a DIV within BODY using CSS

6 Answers6