Выравнивание по центру экрана

Просмотров: 12612Комментарии: 3
ПрограммированиеCSS
Выравнивание по центру экрана

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

Это делается с помощью стилей CSS.

Допустим у нас есть форма которую нужно вывести по центру экрана, заключенная тегом div

<div class="mypanel">
...
</div>

Форма имеет размер 150 на 80 пикселей. Зададим для нашей панели размер через CSS.

<style type="text/css">
.mypanel { width: 150px; height: 80px; }
</style>
<div class="mypanel">
...
</div>

Зафиксируем блок на экране, и зададим отступы слева и сверху на пол экрана

.mypanel {
width: 150px;
height: 80px;
position: fixed;
top: 50%;
left: 50%;
}

Получиться нечто следующее:

Осталось сделать смешение блока на половину его ширины вправо и на половину высоты вверх. Делается это очень просто, через свойство margin.

.mypanel {
width: 150px;
height: 80px;
position: fixed;
top: 50%;
left: 50%;
margin-top: -40px;
margin-left: -75px;
}

Вот и все, мы получили блок который находится в центре браузера при любом разрешении экрана.

Если нужно разместить блок не по центру экрана, а только горизонтальное выравнивание по центру.

.mypanel {
width: 300px;
height: 100px;
margin: 0 auto;
}

Комментариев: 3 RSS

Оставьте комментарий!

grin LOL cheese smile wink smirk rolleyes confused surprised big surprise tongue laugh tongue rolleye tongue wink raspberry blank stare long face ohh grrr gulp oh oh downer red face sick shut eye hmmm mad angry zipper kiss shock cool smile cool smirk cool grin cool hmm cool mad cool cheese vampire snake excaim question

Используйте нормальные имена. Ваш комментарий будет опубликован после проверки.

     

  

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

(обязательно)