KOMPX.COM or COMPMISCELLANEA.COM   

CSS horizontal and vertical centering. Variant 1

An element is CSS centered, horizontally and vertically (using display:table and display:table-cell for vertical alignment):

HTML code:


<div class="example">
	<div class="table">
		<div class="table-cell">
			<div class="content"></div>
		</div>
	</div>
</div>

CSS code:


.table {height: 100%; width: 100%; display: table;}
.table-cell {display: table-cell; vertical-align: middle; text-align: center;}
.content {display: inline-block; vertical-align: top;}

The height and width of example container are supposed to be larger than those of content to make sense to align anything horizontally and vertically.

Browser support
Windows
Internet Explorer 8.0+
Firefox 1.0+
Google Chrome
Opera 4.0+
Safari 3.1+
SeaMonkey 1.0+
Mozilla 1.5+
Netscape 7.2+
Linux
Firefox 1.0+
Google Chrome / Chromium
Opera 5.0+
SeaMonkey 1.0+
Mozilla 1.5+
Netscape 7.2+
More