Vertical and horizontal centering an element of no specific width or height

by Gustavo

HTML

<div id="wrapper">
	<div id="outer">
		<div id="formwrap">
			<form id="form1" method="post" action="">
				<p>
					<label for="t1">Name: </label>
					<input type="text" name="t1" id="t1" value="I'm in the middle" />
				</p>
				<p>
					<label for="t2">Password: </label>
					<input type="password" name="t2" id="t2" />
				</p>
			</form>
		</div>
	</div>
</div>

CSS

* {margin:0;padding:0}
html,body{height:100%}
#wrapper{
	height:100%;
	width:100%;
	display:table;
	vertical-align:middle;
}
#outer{
	display:table-cell;
	vertical-align:middle;
}
#formwrap{
	position:relative;
	left:50%;
	float:left;
}
#form1{
	border:1px solid #000;
	padding:20px 20px;
	position:relative;
	text-align:right;
	left:-50%;
}
p{margin:1em 0}
input{position:relative;background:#ffffcc}