Return to Snippet

Revision: 23664
at February 10, 2010 17:21 by adrianparr


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" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>untitled</title>
	<style type="text/css">
	
	html, body {
		height: 100%; /* This value has to be set */
		margin: 0;
		padding: 0;
		}
	
	div#shim {
		float: left;
		visibility: hidden;
		width: 100%;
		height: 50%;
		margin-top: -150px; /* This has to be half the height of the element you want to center */
		}
		
	div#wrapper {
		clear: both; /* This value has to be set */
		width: 500px;
		height: 300px; /* Need to specify a height */
		background: #ffc;
		margin: 0 auto; /* This centres horizontally */
		}
	
	</style>
</head>

<body>

<div id="shim"></div>
<div id="wrapper">
	<p>This is my centred web page.</p>
</div>

</body>
</html>

Initial URL


Initial Description


Initial Title
HTML Vertical Centering

Initial Tags
css, html, center

Initial Language
HTML