Xiper

Выравнивание по центру с position: absolute

Автор: Евгений Рыжков Дата публикации:

Довольно часто на сайтах используются всплывающие окошки (различные формы, сообщения и т.п.), которые нужно расположить по середине экрана (или основного контейнера).
пример окошка в центре экрана
пример такого окошка.

Обычно, координаты для таких окошек вычисляются с помощью javascript по формуле left = <ширина родителя или экрана>/2 - <ширина окна>/2. Но когда ширина (width) окна фиксированная, можно не делать лишних вычислений, а задать позицию такого окна в CSS:

.divInCenter {
width: 300px; /* жестко задана ширина */
position: absolute;
left: 50%;
margin-left: -150px; /* отрицательный отступ равный 1/2 ширины (width) позиционируемого блока */
}

Посмотреть пример. Проверено в:

Заметки

  • Когда же известна и высота позиционируемого блока, аналогично можно отцентрировать и по вертикали (с этим нужно быть аккуратней — не всегда окно может появится, где ожидается. Например, когда страница занимает больше одного экрана, такое позиционирование не будет учитывать на сколько прокручено окно и всегда будет показывать всплывающий блок в одном и том же месте).
  • в expression 200 — это высота родительского блока.