Centering a div to the middle of the web page?

Question

I want to make my div be positioned in the middle-center part of the web page. I'm attempting to make a pre-loader div which should be in the middle-center part of the web page and after the page loads, that div will be hidden. How can I achieve such?

The div should be centered horizontally and vertically.

Answer 1

<div class = 'middle'></div>

.middle{
  margin: auto;
  width: 900px;
}

Answer 2

to center a div both hor and ver you could do this way:

markup

<div class="centered"></div>

css

.centered{
    position:absolute;
    width:100px;
    height:100px;
    left:50%;
    top:50%;
    margin-left:-50px;
    margin-top:-50px;
}

fiddle: http://jsfiddle.net/steweb/qSvAQ/1/