Centering a div to the middle of a webpage?

Question

I want my div to be in the middle of the webpage. I am trying to make a pre-loader div that should be in the middle of the web page and after loading the page this div will be hidden. How can I achieve this?

The div should be centered horizontally and vertically.

Answer 1

to center the div of both hor and ver you can do this:

Markup

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

CSS

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

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

Answer 2

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

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