Div точно по середине, горизонталь и вертикаль.

Комментарии  (16)

Привет всем :).
Тут где-то в каментах написали, где продолжение.
Так вот оно.

Вот тут наваял CSS`ку которая центрует DIV по середине, и не просто по середине, а по середине по вертикали и по горизонтали, короче прямо посередине окна.
Я смотрел как это сделано у Google.com и на Ya.ru и еще на других подобных.
Но у них как-то сложно или я просто не понял.

Вот и сделал свой способ, наверняка кто-то уже и до меня это придумал.

Сначала сама идея.
Делаем блок шириной 100%, прямо по середине по вертикали (top: 50%;),но делаем его высотой в 0px.

А теперь прямо в него вставляем другой блок, казалось бы бред,ведь высота внешнего у нас 0рх, но не все так страшно мы просто выставляем внешнему свойство (overflow: visible;).

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

Задаем в минус ровно половину заданной высоты внутреннего блока. В примере у нас высота 110рх, значит в минус мы задаем -55рх.

Точно также мы поступаем и с горизонталью. У нас задана позиция блока 50% и соответственно мы задаем внешний отступ в половину заданной ширины, но в минус (left: 50%;width:300рх; margin-left:-150px;).

Ну вот вроде теория вся. Непонятно все и сумбурно написано наверное, но если посмотреть на код, то должно все встать на свои места.
Ну вот собственно и код.

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
31
32
33
34
35
36
37
38
39
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
<TITLE>Центруем DIV</TITLE>
<STYLE type="text/css" media="screen">
body {
        color: #fff;
        background-color: #000;
        margin: 0px
        }
#centr {
        text-align: center;
        position: absolute;
        top: 50%;
        left: 0px;
        width: 100%;
        overflow: visible;
        visibility: visible;
        display: block
        }
#centr_div {
        background-color: #00f;
        margin-left: -150px;
        position: absolute;
        top: -55px;
        left: 50%;
        width: 300px;
        height: 110px;
        visibility: visible
        }
</STYLE>
        </HEAD><BODY>
                <DIV id="centr">
                        <DIV id="centr_div">
                                          Этот текст отцентрован<BR>
                                       <h2>ТОЧНО ПО ЦЕНТРУ,</h2>
                                       полюбому!</DIV>
                        </DIV>
</BODY></HTML>

Только в примере не обращяйте внимание на стиль отвечающий за футер, он нужен только для того чтобы сделать ссылку «Назад».

Недостаток этого способа, что ширина и высота фиксированные.
Вот такой способ центрирования div по вертикали и горизонтали.

Пример
14
Авг
2009

16 Комментариев к статье:
“Div точно по середине, горизонталь и вертикаль. ”

  1. Батенька, да вы извращенец! Вы что-нибудь слышали про валидность кода, стандарты? Ах да! Скоро же в седьмой класс Вам идти!
    Ответ: Чем голословно вот так говорить, лучше указали бы на ошибки. И еще не понятно, при чем тут седьмой класс? Или вы там надеетесь за одну парту со мной сесть, так я вас разочарую, школу я давно закончил.
    PS. Для вашего удовольствия вставил кнопочку валидатора. Который показывает прохождение теста на валидность.

  2. Спасибо! Это действительно грамотное решение.

  3. Спасибо, очень помогло!

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

  5. Эм…я канеш эти ваши дизайнерские курсы не заканчивал фобщем, лаптем щи хлебаемъ, но мож я мож не понимаю чаво, но зачем было див в диве с разными стилями хгородить, ежле можно к тому диву, что по центру разместить надобно, оттакое правило применить:

    #somecssrule
    {
    position: fixed;
    width: px;
    height: px;
    left: 50%;
    top: 50%;
    margin-top: -(N/2)px;
    margin-left: -(M/2)px;
    }
    , хде шоб все заработало, надо вместо N вашу высоту, знач, дива указать, а вместо M ширину яго. Ну и самому и то и другое значение ополовинить для маргинов, значит.

    На кой леший бор было городить двойные div и CSS?

  6. Во! Адаптированный вариант для твоего примера, автор, значит:

    1) выкинь CSS с обоих дивов;
    2) создай оттакой класс:
    #somecss
    {
    position: fixed;
    width: 300px;
    height: 140px;
    left: 50%;
    top: 50%;
    margin-top: -70px;
    margin-left: -150px;
    background-color: blue;
    text-align: center;
    }

    3)назначь этот класс на тот див, который надо отцентровать, внутренний который;

    4) PROFIT!!!

    Результат 1-в-1 получится. Но при этом будет сразу будет понятно, как это работает, это все требует в 2 раза меньше кода в плане CSS, это все гораздо проще потом править и обслуживать, если надо, плюс это не является «велосипедом», а простой способ, не требующий переверстывания всей страницы, ради переделки одного дива.

    P.S. А если в эту css-ку еще и border-radius: 20px; кинуть, то оно еще и смотреться будет приятнее.

  7. а ежели
    box-shadow: 0 0 50px blue;
    добавить, то вообще будет шик

  8. Согласен, но тут немного другая цель была, и лишние элементы только мешали бы пониманию кода

  9. А потом городить костыли что-бы это все заработало в ИЕ6 ?
    Если вы подумали, что под ИЕ6, верстать не надо, то вам к заказчикам надо идти и объяснять что он умер.

  10. 1) Забудьте о IE6, его не существует, есть только IE9, поддерживающий указанные CSS3-приблуды;
    2) Ну не отобразятся эти приблуды на IE6 и что? Просто див будет без скруглений и без подсветки, как и у вас в примере. А на других браузерах все будет красиво;
    3) И вообще, причем тут украшения? Я имел ввиду, что зачем так сильно изощряться, центруя объект с помощью 2 CSS, один из которых привязан к внешнему диву? Такие вещи должны решаться в 1 CSS, привязанном к 1 объекту, чтобы в случае правки не надо было задумываться о тонкостях перекрытий и взаимодействия этих дивов. Мое решение более гибкое, и, что немаловажно, правильное, потому что естественное.

    Это не выпад в ваш адрес, не попытка что-то там доказать. Но, надеюсь, это поможет Вам делать в дальнейшем более гибкие и быстрые в плане разработки решения.

  11. И, раз на то пошло, в моем примере, даже с украшениями, гораздо меньше лишних элементов и гораздо проще понимание кода и того, как он работает.

  12. А для заказчика вот аргумент, который появился еще года полтора назад:

    http://enoughie6.com/

  13. Я разумеется знаю, что сам микрософт отказался от него, но по официальной статистике доля ИЕ6 в России на данный момент 17%.
    Я согласен кинуть их на такие плюшки как радиусы и тени и прочие финтифлюшки, но позиционирование элементов должно быть нормальным, я считаю, пока даже в ИЕ6. Пусть выглядит у них все по уродски, но сама структура рассыпаться не должна, так как 17% это еще много.
    Может я и способствую тому что он так долго еще жив, но мне платят деньги за верстку и под него тоже.
    Иногда люди специально оговаривают совместимость с ИЕ6.

    У меня в офисе винда стоит уже лет по 5-7 (есть уникальный комп на нем стоит win2000 уже 10 лет, у бухгалтера :)
    Попытки заставить пользоваться нормальным браузером ни к чему не приводят.

  14. То есть хотите сказать, что IE6 понимает вот такие приемы с двойными CSS, когда внешний используется для позиционирования внутреннего, а одинарный класс
    #somecss
    {
    position: fixed;
    width: 300px;
    height: 140px;
    left: 50%;
    top: 50%;
    margin-top: -70px;
    margin-left: -150px;
    background-color: blue;
    text-align: center;
    }
    он не поймет? Глупости. Плюс тут используются те же правила, что и у вас, только они организованы более рационально. В в плане кода ничего сверхъестественного.. Понятие «архитектура» никто не отменял.

  15. Ктстати, если бы бухгалтер узнал, что из-за связки Win2000+IE6, для злоумышленников не составит труда влезть к нему в комп и, в лучшем случае поправить бухгалтерию лет на 5 отсидки, а вхудшем того более, он бы сам перескочил не то что на новый браузер — лично бы выступил инициатором полного апгрейда системы.

  16. И, кстати да,по офф.статистике у IE6 не 17%, а 1.7%…

    http://www.ie6countdown.com/

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