KOMPX.COM or COMPMISCELLANEA.COM   

CSS выравнивание по центру: по ширине и по высоте. Вариант 1

С помощью CSS, элемент выравнивается по центру: по ширине и по высоте. Для выравнивания по высоте используются display:table и display:table-cell.

HTML код:


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

CSS код:


.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;}

Поддержка в браузерах
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+
Ещё