Для вертикального выравнивания в блоках разработчики W3C создали замечательное свойство display: table-cell;, которое позволяет заставить какой-либо элемент отображаться как ячейка таблицы. При этом добавив vertical-align: middle; мы прекрасно справились бы с поставленной задачей, если бы не Internet Explorer, который ни в какую не хочет поддерживать свойство display: table-cell;. Ниже приведен образец кода, который поможет IE отображать содержимое блока по середине, также как в остальных браузерах:

HTML:

<div class="container">
  <p class="middled">Вертикально отцентрированный элемент</p>
</div>

CSS:

.container {
  display: table-cell;
  vertical-align: middle;
}
.middled {
  margin-top: expression((parentNode.offsetHeight - this.offsetHeight)<0 ? "0" : (parentNode.offsetHeight - this.offsetHeight)/2 + "px");
}

Для укрощения IE мы воспользовались expression‘ом. Expression выполняет следующие функции: он вычисляет высоту родительского и дочернего элементов, затем их разность делит пополам, а полученное в результате этого число мы используем в качестве значения верхнего отступа для дочернего элемента. Expression лучше убрать в отдельный css файл используя условные комментарии.

Источник

Ещё несколько интересных решений