Forum Moderators: not2easy
<!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=iso-8859-1" />
<title>Vertical centre an element of unknown height and width</title>
<style type="text/css">
html, body {
height:100%;
margin:0;
padding:0
}
#wrapper {
height:100%;
width:100%;
display:table;
vertical-align:middle;
position:fixed;
z-index:5000;
overflow:hidden;
}
#outer {
display:table-cell;
vertical-align:middle;
}
#inner {
position:relative;
left:50%;
float:left;
}
#middle {
border:1px solid #000;
padding:20px 20px;
position:relative;
text-align:center;
left:-50%;
}
p { margin:1em 0 }
div#loading_overlay {
position: fixed;
top: 0;
left: 0;
z-index: 4000;
width: 100%;
height: 100%;
background: #000;
opacity: 0.5;
filter: alpha(opacity=50);
}
img#loading_animation img {
display:block;
margin:auto;
}
img#loading_animation { text-align:center; }
p#loading_message {
text-align: center;
margin-top: 10px;
padding: 5px 0 7px 0;
border-top: 1px solid #FFF;
border-bottom: 1px solid #FFF;
color: #FFF;
font-weight: bold;
font-family: Verdana, Geneva, sans-serif;
}
</style>
<!--[if lt IE 8]>
<style type="text/css">
#inner {top:50%}
#middle{top:-50%;}
</style>
<![endif]-->
<!--[if IE 7]>
<style type="text/css">
#wrapper{
position:relative;
overflow:hidden;
}
</style>
<![endif]-->
</head>
<body>
<div id="loading_overlay"> </div>
<div id="wrapper">
<div id="outer">
<div id="inner">
<div id="middle">
<div id="loading_animation"><img src="assets/ajax/loading/ajax-loader(3).gif" /></div>
<p id="loading_message">This is the loading message</p>
</div>
</div>
</div>
</div>
</body>
</html>
