Каков наилучший способ для вертикального и горизонтального центрирования элемента HTML в области просмотра?

Question

Допустим, я хочу разместить элемент в центре моего окна просмотра для использования в качестве всплывающего сообщения.Он должен соответствовать следующему:

• Элемент должен оставаться центрированным (как по горизонтали, так и по вертикали) в браузере, даже если размер элемента изменяется динамически
• Элемент должен оставаться центрированным, если размер браузера изменен
• Javascript не разрешен
• Все равно будет работать в IE7

Есть ли лучший способ добиться этого, не прибегая к решению на основе таблиц ниже?

<table style="position:absolute;width:100%;height:100%">
    <tr>
        <td align="center">
            <span id="centeredContent">I always remain centered</span>
        </td>
    </tr>
</table>

Answer 1

Лучшее решение (на мой взгляд) - использовать абсолютное позиционирование, чтобы поместить верхний левый угол элемента на 50% / 50%, а затем сместить элемент обратно в центр, используя отрицательные поля.Единственным недостатком является то, что вы должны указать ширину и высоту элемента.Вот пример:

HTML:

​<div id="centerme">
    Hello, world!
</div>​

CSS:

​#centerme
{
    position: absolute;
    left: 50%;
    top: 50%;

    /* You must set a size manually */
    width: 100px;
    height: 50px;

    /* Set negative margins equal to half the size */
    margin-left​: -50px;
    margin-top: -25px;

    background-color: cornflowerblue;
}

Вот демонстрация на jsfiddle: http://jsfiddle.net/UGm2V/

---

Если вам действительно требуется, чтобы центрированный контент имел динамическую высоту, есть более продвинутое решение.Имейте в виду, что это не будет работать в старых браузерах IE.HTML-код выглядит следующим образом:

<div id="outter-container">
    <div id="inner-container">
        <div id="centred">
            <p>I have a dynamic height!</p>
            <p>Sup!</p>
        </div>        
    </div>
</div>

Внешний контейнер необходим для покрытия ширины и высоты страницы.Это блочный элемент с абсолютным позиционированием.
Внутренний контейнер на самом деле является таблицей!Это решается с помощью свойства display: table css.Выигрыш в том, что на самом деле вам не нужен никакой HTML-код таблицы.
#centred div - последний обязательный элемент.Он по-прежнему покрывает 100% ширины и высоты страницы, но все, что находится внутри, будет отцентрировано как по вертикали, так и по горизонтали.Это css, который вам нужен, с объяснениями:

/*
An outter container is needed because the table
won't cover the page width and height on it's own
*/
#outter-container
{
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
}

/*
The inner container is a table which is set to
cover the width and height of the page.
*/
#inner-container
{
    display: table;
    width: 100%;
    height: 100%;
}

/*
This table cell will cover 100% of the page width
and height, but everything placed inside it will
be placed in the absolute centre.
*/
#centred
{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

И, конечно, вот демонстрация jsfiddle для этого: http://jsfiddle.net/N7ZAr/3/

Answer 2

Если это элемент фиксированного размера, вы можете сделать что-то вроде этого:

#centered {
    position:absolute;
    width:200px;
    height:400px;
    top:50%;
    left:50%;
    margin-left:-100px; // negative-half of element's width
    margin-top:-200px; // negative-half of element's height
}​

Трюк здесь top:50%; left:50%;. Объедините его с margin-left и margin-top, равными отрицательной половине ваших width и height, и ваш элемент будет центрирован на вашей странице.

Если вы не используете таблицу стилей сброса, такую ​​как сброс CSS Эрика Мейера или normalize.css, важно, чтобы вы установили body на margin:0;, чтобы этот трюк работал.

Вот jsfiddle: http://jsfiddle.net/remibreton/fZywe/1/

Живой пример сайта, который я сделал: http://althotels.ca/

Answer 3

Если вы не знаете размер центрированного контента, вам нужно двухэтапное центрирование Пример здесь: http://jsfiddle.net/G6fUE/

<div class="popup-center">
    <div class="content">
        sadalshd<br />
        sadalshd<br />
        <img src="http://www.lorempixel.com/200/200" />
        sadalshd<br>
    </div>
</div>​

---

.popup-center {
    position: absolute;
    top: 50%;
    left: 50%;
}
.popup-center div {
    margin-left: -50%;
    margin-top: -50%;
}

1007 *

Answer 4

http://milov.nl/code/css/verticalcenter.html проверьте исходный код

Answer 5

для левого / правого центрирования, вы можете указать ширину элемента и установить для левого и правого поля значение «auto».

Для вертикального центрирования это немного сложнее.Вы можете использовать процентную высоту, но не забудьте установить высоту тела равной 100%, иначе это не будет работать.

Не знаю, работает ли это в IE7, извините.