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

Question

How to display div over other webpage content? This div should 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, not the 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; } 

Pickets -300 pixels and -250 - the negative half of the height / width of the div, respectively.

Maybe the best way to do this, but this is a method that I used a while ago.