Advanced Search

Return to Snippet

Revision: 42768
at March 10, 2011 06:19 by stephcode
Initial Code 
<!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>
Initial URL 
http://www.pmob.co.uk/pob/vertical-center1.htm
Initial Description 









Initial Title





I'll just leave this here. Centered Vertical and Horizontal









Initial Tags














Initial Language





CSS