Элемент с position: absolute по центру родителя
Дата публикации: 14.10.2009
Довольно часто на сайтах используются всплывающие окошки (различные формы, сообщения и т.п.), которые нужно расположить по середине экрана (или основного контейнера).
пример такого окошка.
Обычно, координаты для таких окошек вычисляются с помощью javascript по формуле
left = <ширина родителя или экрана>/2 — <ширина окна>/2.
Но когда ширина (width) окна фиксированная, можно не делать лишних вычислений, а задать позицию такого окна в CSS:
.divInCenter {
width: 300px; /* жестко задана ширина */
position: absolute;
left: 50%;
margin-left: -150px; /* отрицательный отступ равный 1/2 ширины (width) позиционируемого блока */
}
Посмотреть пример. Проверено в:
Заметки
- Когда же известна и высота позиционируемого блока, аналогично можно отцентрировать и по вертикали (с этим нужно быть аккуратней — не всегда окно может появится, где ожидается. Например, когда страница занимает больше одного экрана, такое позиционирование не будет учитывать на сколько прокручено окно и всегда будет показывать всплывающий блок в одном и том же месте).
- в expression 200 — это высота родительского блока.
Теги: позиционирование
Показать комментарии