Вертикальное позиционирование в DIV

При использовании DIV-Style верстке, часто возникает проблема с позиционированием контента по вертикали.

Указание vertical-align:bottom; в CSS игнорируется браузерами. Если вы все-таки не хотите использовать table, можно воспользоваться следующим css хаком

По умолчанию контент внутри DIV располагается всегда вверху, поэтому интересно лишь заставить содержание DIV оказаться в центре или внизу.

CSS

  
<style type="text/css">
.table {
	border:1px #ccc solid;
	display:table-cell;
}
.table .tr, .table .td { position: relative;}

.vmiddle {vertical-align:middle;}
.vbottom {vertical-align:bottom;}

/* fix for ie6 */
.vbottom .tr, .vbottom .td {  //top: 100%; width: 100%;}
.vbottom .td {//top: -100%;}

/* fix for ie6 */
.vmiddle .tr, .vmiddle .td {  //top: 50%; width: 100%;}
.vmiddle .td {//top: -50%;}
</style>

HTML

<div class="table vmiddle" style="height:200px; ">
	<div class="tr">
		<div class="td"><strong>Текст посередине DIV</strong></div>
	</div>
</div>

<div class="table vbottom" style="height:100px; ">
	<div class="tr">
		<div class="td"><strong>Текст внизу DIV</strong></div>
	</div>
</div>