How to show a div overlay in the exact middle of the page?

HTML & CSS
1

I am making a loading icon, and I need to know how I would make it so I can position a DIV ID element to be displayed smack dab in the middle of the page overlaying anything. Can someone explain to me how I would do this? Thanks.

2

Hi,

Assuming that the message is a fixed height and width and that the loading element is outside all of the other page content you could do this.You could do something like this.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
    margin:0;
    padding:0
}
html, body {
    height:100&#37;
}
#loading {
    width:200px;
    line-height:50px;
    height:50px;
    background:red;
    border:5px solid #000;
    position:fixed;
    left:50%;
    margin-left:-100px;
    top:50%;
    margin-top:-30px;
    z-index:999;
    text-align:center;
}
* html #loading {
    position:absolute
}
#page-content {
    width:780px;
    margin:auto;
    background:#ffffcc;
    padding:10px;
    border:1px solid #000;
}
</style>
</head>
<body>
<div id="page-content">
    <p>This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content </p>
    <p>This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content </p>
    <p>This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content </p>
    <p>This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content </p>
    <p>This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content </p>
    <p>This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content </p>
    <p>This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content </p>
    <p>This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content </p>
    <p>This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content </p>
    <p>This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content </p>
    <p>This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content </p>
    <p>This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content </p>
    <p>This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content This is some content this is some content </p>
</div>
<div id="loading">Loading Please wait...</div>
</body>
</html>
3