Vertically Centering a Div in Body

Vertically centering a div in body?

See this edited version of your jsFiddle.

Basically, just wrap your content in <div class = "main"><div class = "wrapper"></div></div>, and add the following CSS:

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

How to vertically align a div in the body?

<html>
    <head>
        <style>
            .rectangle {

            background: #000;
            height: 200px;
            width: 200px;
            }

            .container {
                width: 100%; /* Firefox needs this */

            height: 100%; /* Height can be anything */

            /* WebKit (Chrome & Safari) */
            display: -webkit-box;
            -webkit-box-pack: center;
            -webkit-box-align: center;

            /* Firefox */
            display: -moz-box;
            -moz-box-pack: center;
            -moz-box-align: center;

            /* IE */
            display: -ms-box;
            -ms-box-pack: center;
            -ms-box-align: center;

            /* Native CSS */
            display: box;
            box-pack: center;
            box-align: center;

            background: red;

            }
        </style>
    </head>
    <body>
    <div class="container">
        <div class="rectangle">
        </div>
    </div>
    </body>
</html>

Internet Explorer 10 supports an alternative, the -ms-flex-align property.
Firefox supports an alternative, the -moz-box-align property.
Safari, Opera, and Chrome support an alternative, the -webkit-box-align property.
Note: Flexible boxes are not supported in Internet Explorer 9 and earlier versions.

Vertically centering a div inside another div

tl;dr

Vertical align middle works, but you will have to use table-cell on your parent element and inline-block on the child.

This solution is not going to work in IE6 & 7.
Yours is the safer way to go for those.
But since you tagged your question with CSS3 and HTML5 I was thinking that you don't mind using a modern solution.

The classic solution (table layout)

This was my original answer. It still works fine and is the solution with the widest support. Table-layout will impact your rendering performance so I would suggest that you use one of the more modern solutions.

Here is an example

Tested in:

FF3.5+
FF4+
Safari 5+
Chrome 11+
IE9+

HTML

<div class="cn"><div class="inner">your content</div></div>

CSS

.cn {
  display: table-cell;
  width: 500px;
  height: 500px;
  vertical-align: middle;
  text-align: center;
}

.inner {
  display: inline-block;
  width: 200px; height: 200px;
}

Modern solution (transform)

Since transforms are fairly well supported now there is an easier way to do it.

CSS

.cn {
  position: relative;
  width: 500px;
  height: 500px;
}

.inner {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 200px;
  height: 200px;
}

Demo

♥ my favourite modern solution (flexbox)

I started to use flexbox more and more its also well supported now Its by far the easiest way.

CSS

.cn {
  display: flex;
  justify-content: center;
  align-items: center; 
}

Demo

More examples & possibilities:
Compare all the methods on one pages

Center divs in body horizontally and vertically with flexbox

You need align-content: center to run

align-content : center

See this:

http://css-tricks.com/almanac/properties/a/align-content/

I recommend to you to nest objects in a div. Change the body behaviour is dangerous.

How do I center vertically and horizontally a div inside the body element without absolute positioning?

display:table and display:table-cell are bad, stay away from them. Here is a very common way to center a div inside <body>. It positions the element's top and left sides at the 50% point within body and then subtract 1/2 the width and height from the margin-top and margin-left.

.box {

  background-color: black;

  position: absolute;

  left: 50%;

  top: 50%;

  width: 20px;

  height: 20px;

  margin-left: -10px;

  /* -1/2 width */

  margin-top: -10px;

  /* -1/2 height */

}

<body>

  <div class="box">

  </div>

</body>

How Can I Vertically Center All Elements in the Body Tag?

<div class="container">
    <div class="cent"></div>
</div>

html,body
{
    height: 100%;
}
body
{
   display: table; 
   margin: 0 auto;
}

.container
{  
    height: 100%;
    display: table-cell;   
    vertical-align: middle;    
}
.cent
{
    height: 50px;
    width: 50px;
    background-color: black;      
}

You could try this: http://jsfiddle.net/danield770/tVuS6/14/

From here: Center a div horizontally and vertically and keep centered when resizing the parent

Change about your needs.

By the way, there isn't a way to make content centered without using some divs elements.

If you want to learn more about that, I would like to recommend you some tips:

http://www.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/
http://css-tricks.com/centering-in-the-unknown/

Good luck!

Vertically Centering a Div in Body