How to display a div over other content and in the center of webpage using CSS?

Question

How do I display a div over other content of webpage? This div must be centered vertically and horizontally as in this example:

I tried this:

<div style = "position: absolute; top: 50%; left: 50%;">DIV content</div>

In this example only the left corner is centered and not div itself.

Answer 1

The following should work.

div{
    position:fixed;
    width:500px;
    height:600px;
    margin:-300px auto auto -250px;
    top:50%;
    left:50%;
    text-align:center;
}

The -300 pixels and -250 pixels are the negative half of the height/width of the div respectively.

There may be a better way of doing this, but this is a method I used a while back.