Picnic Website Code Tutorials

CSS Vertically Center Unknown Height Tutorial

Here is a working Demo »

Works in all Modern browsers IE9+

CSS

*{margin:0;padding:0;}
html, body {
height:100%;
}
#wrap {
display:table;
overflow:hidden;
margin:0 auto;
height:100%;
width:465px;
}
#content {
display:table-cell;
vertical-align:middle;
}
		

HTML

<div id="wrap">
	<div id="content">
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.</p>
	</div>
</div>
		

Need help adding this or other code to your website? Post it here in the forum! Forum

Sponsors

Top Donators

Friends of Mine