HTML CSS шпаргалка Рецепты, статьи, советы, приемы html css

Выравнивание блока по центру по вертикали и горизонтали

Известно, что выровнить блок заданной ширины по центру по горизонтали можно с помощью свойства margin:0 auto. Но как поступить, если его еще надо выровнить по центру по вертикали.

На самом деле всё просто. Чтобы разместить по центру блок с заданной шириной и высотой, надо его абсолютно спозиционировать с left:50% и top:50% относительно экрана и отрицательным маргином сместить его назад на половину размера ширины и высоты дива.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Выравнивание блока по центру по вертикали и горизонтали</title>
    <style type="text/css">
    html, body{
        margin:0;
        padding:0;
        width:100%;
        height:100%;
    }
    #CenterBlock{
        background:#F00;
        width:400px;
        height:400px;
        position:absolute;
        top:50%;
        left:50%;
        margin:-200px 0 0 -200px;
    }
    </style>
</head>
 
<body>
    <div id="CenterBlock">
        Я отцентрированный блок	
    </div>
</body>
</html>

Как видите, сначала мы задали html и body 100% высоту, чтобы они растянулись на весь экран, потом спозиционировали слой с left и top по 50% и отрицательным маргином сместили его назад на половинчатые размеры.

Метки: ,

Комментарии (26) на “Выравнивание блока по центру по вертикали и горизонтали”

  • Anton:

    Если не секрет, где вы живете? Уж очень вы на украинца похожи :)

  • admin:

    Антон, я русский, не беспокойтесь =)

  • Sergei:

    Подписался на РСС, буду читать почаще!

  • Ilya:

    Здравствуйте,
    Если начать сужать страницу по высоте, надпись и весь красный блок уезжает вверх под навигацию браузера, причем вертикального скрола не появляется.
    Можно как-то это обойти?

  • Костя:

    Ilya, попробуйте задать минимальную высоту для сайта, равную окошку, может прокатит)

  • Ilya:

    Добавил
    min-height:700px;
    не помогает, может быть еще способ?

  • Паша:

    А что делать, если блок не фиксированный (по высоте)?

  • WhiteS:

    Менее элегантный, но рабочи вариант ( #006699 цвет подобран под картинку )

    Image without IMG

    body {
    background-color: #006699;
    }
    #CenterBlock{
    background-color: #006699;
    background-image: url(‘pict.jpg’);
    height:644px;
    width:897px;
    }

    text
    Text in Centraled Block

  • WhiteS:

    эээ не вышло поста.
    суть:
    table w=100% h=100%; tr align = center; td valing = center;
    в таблице div id = «CenterBlock», align = left;

  • Ясно. Спасибо за информацию. Попробую сделать))))

  • А если неизвестна ширина и высота родительского блока, тогда как делать?

  • WhiteS:

    [code]1[/code]

  • Snuper:

    «Если не секрет, где вы живете? Уж очень вы на украинца похожи»
    И чем же он похож?

  • фывфыв:

    ёптыть, научись всё таки писать грамотно. Запятые в заголовке поставь, мудила

  • хуйня какая-то:

    хуйня какая-то

  • гавно:

    Гавно, при изменении разрешения все поплывет…и впрямь — хуйня!!!

  • НУ точно же! а я уже час мучилси! Спасибо!

  • Не помогло. Пытался выровнять блок по серединке, всё равно влево съезжает. Будем искать.

  • Действительно говно:

    Действительно говно полное. При изменении размеров окна браузера вся эта шляпа попадает в просак. Вообще жалею о том что потратил минуту, прочитав эту хуйню!

  • Алёша:

    Что я только не делал с дивом: никак не хотел на место вставать. Спасибо за статью.

  • Скажите а как его выровнять только по вертикали..
    тоесть хочу поставить небольшой блок, чтобы он напр. придерживался левого края, но по вертикали был по центру ???

  • Max:

    Ребята , float: left; пропишите в стилях левого блока!!!!!!!!!!правый обтекать не будет!

  • я решил полегче http://divhack.com/node/26
    пашет под ие7,8 и всеми нормальными браузерами

  • Юлия:

    Здрассте!
    Не подскажете, как сделать, чтобы таблица, которая нах в основной таблице, смещалась вниз (по содержимому соседней ячейки). Могу показать:) если непонятно выразилась.

    Если можно, в ай-си-ку 338702854
    Спасибо

  • Константин:

    Применил у себя. Всё прекрасно сработало! Очень корректно и легко. По-моему, у кого не получается, пусть проверит коды и всё станет на место.

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

Для вставки кода используйте <code> ... </code>.



Самые комментируемые

Облако тегов

Нет тегов найденных по заданным критериям.

Опрос