Never been to CodeSnippets before?

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 (or not, you can keep them private!)

About this user

Dan Berlyoung

1 total

On This Page:

  1. 1 Center something vert. and horz. in a web page using CSS

Center something vert. and horz. in a web page using CSS

to css html by danb on Aug 30, 2006
Here's how to center anything vertically and horizontally in a web page using CSS. Works with most all browsers that support CSS.

I adapted this from Jak psåt web, thanks! <http://www.jakpsatweb.cz/css/css-vertical-center-solution.html>

<html>
	<head>
		<title>Center w/ CSS</title>
		<style type="text/css" media="screen">
			body, html { height:  100%; }
			#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">
					your stuff here in center of page
				</div>
			</div>
		</div>
	</body>
</html>
1 total

On This Page:

  1. 1 Center something vert. and horz. in a web page using CSS