DZone Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

Snippets has posted 5883 posts at DZone. View Full User Profile

Centered Box HTML And CSS

11.03.2006
| 13005 views |
  • submit to reddit
        // HTML for web page with the content centered both vertically and horizontally

<html>
	<head>
		<title>Centered HTML w/ CSS</title>
		<style type="text/css" media="screen">
			body, html { height:  100%; background-color:#000; }
			#outer { height: 100%; width: 100%; overflow:  visible; position: relative; }
			#outer[id] { display: table; position: static; }
			#middle { position: absolute; top: 50%; }
			#middle[id] { display: table-cell; vertical-align: middle; position: static; }
			#inner { position:  relative; top: -50%; text-align: center; }
			#inner[id] { position: static; text-align: center; }
		</style>
	</head>
	<body>
		<div id="outer">
			<div id="middle">
				<div id="inner">
						This is the content
				</div>
			</div>
		</div>
	</body>
</html>