Пятница, 15 Февраль 2013 13:54

Расположение div по центру экрана (центрируем по высоте и ширине)

Автор 
Оцените материал
(0 голосов)

Сегодня мы поговорим о том, как отцентрировать большой блок div как по горизонтали, так и по вертикали. Это необходимо при создании ограниченного по высоте сайта, как на картинке:

 

 Как пишут в интернетах, для решения этой задачи мог бы подойти такой вариант:

Показать/скрыть css код

Посмотреть код
display:block;
width:1000px;
height:640px;
position:fixed;
top:50%;
left:50%;
margin-top:-320px;
margin-left:-500px;

Однако, этот способ имеет ряд недостатков, включая критические. К ним относится: position:fixed, что само по себе не айс, даже не смотря на то, что его можно заменить (при правильном подходе к body и html) на absolute или relative. А еще такое расположение больших блоков недопустимо потому, что на маленьких экранах (телефон, планшет, нетбук) блок обрежется по бокам, а так же сверху и снизу. Ну, и невозможно будет подвинуть блок, потому что скроллбары в этом случае отменяются. Не зависимо от того, какой у вас браузер или гаджет. Даже самый новый айпад не справится.

Казалось бы, можно просто поставить position:relative, и тогда скроллы появятся и сайт можно будет двигать во все стороны... Но не все так просто. Часть слева и сверху все равно уйдет в небытие. То есть, при ширине блока в 1000px, разрешении экрана 800*600 и полноэкранном режиме, у вас скушается и невозможно будет увидеть порядка 100 пикселей слева и 20 сверху, а скроллить можно будет только вправо и вниз, то есть этот вариант так же проигрышный.

Итак, что же делать?

А за решением проблемы, мы обратимся к старым добрым таблицам, хотя применять мы их в верстке и не будем. Как? А вот так:

Показать/скрыть css код

Посмотреть код
  1. html,body {
  2.     width:100%;
  3.     height:100%;
  4. }
  5. html {display:table}
  6. body {
  7.     display:table-cell;
  8.     vertical-align: middle;
  9.     text-align: center;/* для IE6 */
  10. }
  11. #wrapper {
  12.     display:block;
  13.     width: 1000px;
  14.     height:640px;
  15.     text-align: left;/* шоп было все круто */
  16.     margin: 0 auto;
  17. }

Понравилось? Лично мне — очень! И кроссбраузерно, и кроссрезолютивно. Пользуйтесь! :)

Прочитано 9906 раз Последнее изменение Пятница, 15 Февраль 2013 16:00
Твитнуть

Комментарии   

 
Бог
-1 #6 Бог 21.10.2014 12:25
Нормальный вариант центровки по вертикале




.wrapp {
display: table;
margin-right: auto;
margin-left: auto;
height: 100%;
width: 1000px;
}

.block {
display: table-cell;
vertical-align: middle;
}
Цитировать
 
 
dsdfds
+6 #5 dsdfds 19.04.2014 00:57
уебки
Цитировать
 
 
Blackbird-
-1 #4 Blackbird- 13.03.2014 12:37
Огромное спасибо! Только начинаю нормально верстать - материал был крайне полезен.

Скажите, у вас есть простые незагроможденны е кодом примеры адаптивной верстки (на которых можно было бы поучиться делать кроссбраузерно) ?

Возможно посоветуете где-то их посмотреть?
Цитировать
 
 
Серега
-1 #3 Серега 03.03.2014 17:03
Спасибо все просто и понятно!!!!!
Цитировать
 
 
Артем
-1 #2 Артем 26.05.2013 19:52
Цитирую Игорьws:
width: 1000px;
height:640px;


Кроссрезолютивно?


Суть поста не в том сколько пикселей указано в ширине блока демки, а как заставить эту величину, избегая js, меняться.
Цитировать
 
 
Игорьws
0 #1 Игорьws 24.05.2013 16:40
width: 1000px;
height:640px;


Кроссрезолютивно?
Цитировать
 

Добавить комментарий

Защитный код
Обновить

joomla 1.7

Не получаются доработки?

Становитесь партнером студии Millor! Быстро и недорого эти ребята помогут решить практически любую проблему.

Хотите подзаработать?

Если да, то вам сюда! Партнерская программа студии MyWebSite. Получи 20% за каждого клиента! Работаем по всей России и СНГ!

Рекламное место свободно.