<!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>
<title>Centered Element of unknown height and width</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="main.css" rel="stylesheet" type="text/css" />
<!--[if IE ]>
<link href="iecss.css" rel="stylesheet" type="text/css" />
<![endif]-->
<style type="text/css">
* {margin:0;padding:0}
/* mac hide \*/
html,body{height:100%;width:100%;}
/* end hide */
body {
text-align:center;
min-height:468px;/* for ie7*/
}
#xouter{
height:100%;
width:100%;
display:table;
vertical-align:middle;
}
#xcontainer {
text-align: center;
position:relative;
vertical-align:middle;
display:table-cell;
height: 468px;
}
#xinner {
width: 552px;
background:#fff;
height: 468px;
text-align: center;
margin-left:auto;
margin-right:auto;
border:1px solid #000;
}
/* not required for demo */
p,h1{margin-bottom:1em}
#header{margin-right:0}
.maintxt{text-align:left;margin:1em;}
/* - */
</style>
<!--[if lt IE 8]>
<style type="text/css">
#xouter{display:block}
#xcontainer{top:50%;display:block}
#xinner{top:-50%;position:relative}
</style>
<![endif]-->
<!--[if IE 7]>
<style type="text/css">
#xouter{
position:relative;
overflow:hidden;
}
</style>
<![endif]-->
</head>
<body>
<div id="xouter">
<div id="xcontainer">
<div id="xinner">
<div id="header">
<h1 id="logo"><a href="#index.htm">Raw CSS examples</a></h1>
</div>
<h2>Centered Vertical and Horizontal</h2>
<p class="maintxt">Re-size the page smaller and larger to see the vertical and horizontal effect. As you can see the element does not disappear off the top or the side of the screen unlike most other centering methods. Works in all versions of IE and most other modern browsers.</p>
<p>View Source to see the code</p>
<p>Go back to <a href="hoz-vert-center.htm">Vertical centering</a></p>
</div>
</div>
</div>
</body>
</html>