Пятница, 22 Марта 2013 15:05

Position absolute по центру

Written by 
Оцени эту запись
(3 Голоса)

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

 

Для этого метода нам нужно две вещи:

 

1. Элемент должен находиться непосредственно в body или не иметь родительского элемента с position relative. Иначе наш элемент будет отцентрирован относительно родительского, что тоже может оказаться полезным.

2. Нужно знать точную ширину элемента. Обычный блок по умолчанию занимает ширину 100%, но ширина блока с абсолютным позиционирование зависит от его контента и не обязательно растянется на всю ширину родителя.

 

Центрирование элемента с position absolute:

 

.element {

position: absolute;

left: 50%;

width: 400px;

margin-left: -200px;

 

Где 200px - это половина ширины контейнера.

 

<div class="element">Sample Text</div>

 

Результат:

 

Нажмите на "Click Me", появится абсолютно позиционированный блок расположенный по центру. Для того, чтобы его спрятать, нажмите на него.

 

Click Me
Sample Text

 

Аналогично можно цеализовать центрирование по вертикали, если вам известна высота элемента. В таком случае, нужно поставить top: 50% и margin-top: -200px (половина высоты элемента).

 

 

 

Additional Info

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов