CSS - Joomla Show - Joomla Show http://joomla-show.ru Thu, 19 Mar 2015 03:59:32 +0300 Joomla! - Open Source Content Management ru-ru Расположение div по центру экрана (центрируем по высоте и ширине) http://joomla-show.ru/item/59-raspolozhenie-div-po-tsentru-ekrana-tsentriruem-po-vyisote-i-shirine-ekrana http://joomla-show.ru/item/59-raspolozhenie-div-po-tsentru-ekrana-tsentriruem-po-vyisote-i-shirine-ekrana

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

 

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

{code lang:css lines:false hidden:false}display:block;
width:1000px;
height:640px;
position:fixed;
top:50%;
left:50%;
margin-top:-320px;
margin-left:-500px;{/code}

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

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

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

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

{code lang:css lines:true hidden:false}html,body {
    width:100%;
    height:100%;
}
html {display:table}
body {
    display:table-cell;
    vertical-align: middle;
    text-align: center;/* для IE6 */
}
#wrapper {
    display:block;
    width: 1000px;
    height:640px;
    text-align: left;/* шоп было все круто */
    margin: 0 auto;
}{/code}

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

]]>
artyom-vikt@yandex.ru (Артем) CSS Fri, 15 Feb 2013 13:54:09 +0400