Вертикально центрировать область содержимого, пока она не достигнет определенной высоты?

Ответ 1

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

См. рабочий пример здесь:

http://jsfiddle.net/WkQzw/5/

HTML:

<div id="container">
    <div id="table">
        <div id="cell">
            <div id="content">Some content</div>
        </div>
    </div>
</div>

CSS

#container {
    width: 100%;
    height: 100%;
    padding: 100px 0;
    margin-top: -100px;
}
#table {
    display: table;
    width: 100%;
    height: 100%;
    margin-top: 100px;
}
#cell {
    display: table-cell;
    vertical-align: middle;
}
#content {
    background-color: lightblue;
    width: 50%;
    margin: 0 auto;
}

Испытано:

• IE 9 Win7 → РАБОТЫ
• Chrome 30 Mac → РАБОТЫ
• Safari 7 Mac → РАБОТЫ
• Firefox 25 Mac → WORKS

Update:

Я использовал box-sizing: boder-box;, но Firefox потребовал дополнительный -moz-box-sizing: border-box;. Теперь он работает и в Firefox.

Ответ 2

Чистый CSS, Уменьшенный HTML

Это основано на ответе ToniTornado, но с гораздо меньшим количеством оберток.

См. демонстрацию скриптов

HTML

<div id="container">
      <div id="content">Some content</div>
</div>

CSS (минимум для вертикального позиционирования)

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    display: table;
    padding-top: 100px;
    margin-top: -100px;
}

#container {
    display: table-cell;
    vertical-align: middle;
    padding-top: 100px;
}

Дополнительное вертикальное центрирование под верхней областью

Как показала вышеприведенная скрипка, вышеуказанный css центрирует #content на экране. Если вы предпочитаете сосредоточиться на пространстве слева ниже верхней области, затем отрегулируйте body, удалив отрицательное верхнее поле и #container, удалив верхнее дополнение, как эта скрипка, и этот css показывает:

body {
    display: table;
    padding-top: 100px;
}

#container {
    display: table-cell;
    vertical-align: middle;
}

Ответ 3

Хотя для этого требуется дополнительный .wrapper, этот макет можно выполнить с помощью display: table; и друзей:

HTML

<div class="container">
    <div class="top">some space</div>
    <div class="wrapper">
        <div class="content">
            <div style="height: [any height]">centered content</div>
        </div>
    </div>
</div>

CSS

.container {
    display: table;
    width: 100%;
    height: 100%;
}
.top {
    height: 100px;
    display: table-row;
}
.wrapper {
    /* this will take up remaining height (or stretch to content) */
    display: table-row;
}
.content {
    /* because this is displayed as a table cell, the vertical align centers
     * its content (instead of how it usually works on inline elements) */
    display: table-cell;
    vertical-align: middle;
}

http://jsfiddle.net/gLECE/3/

UPDATE

Вышеуказанное будет центрировать контент между верхними 100px и дном, а не между верхним и нижним областями просмотра (хакерский способ сделать это с помощью css http://jsfiddle.net/gLECE/6/, но ответ ToniTornado является прочным решением)

@TCHdvlp попытка закрыта, но отсутствуют некоторые существенные части (отсутствует верхнее пространство и фактически не совсем центрируется).

Рабочая, отредактированная версия TCHdvlp script:

var height = $(document.body).height();
$(".dca").each(function(){
    if(($(this).height()+100) < height){
        $(this).css({top: '50%', marginTop: - $(this).height() / 2 });
    }
});

http://jsfiddle.net/gLECE/6/

Примечание: вы, вероятно, захотите сделать это не только при загрузке страницы, но и при изменении размера окна.

Ответ 4

Табличное решение, основанное на javascript (просто для добавления разнообразия)

HTML

<div id="container">
    <div id="topbar">You can't touch me</div>
    <div id="content">Aliquam erat volutpat...</div>
</div>

CSS

div#topbar {
    border: 2px dashed red;
    height: 50px;
    text-align: center;
}
div#content {
    background: #90c0ff;
    width: 260px;
    margin: 0px auto;
    position: relative;
}

Javascript

var content = document.getElementById('content');
var topMargin = (window.innerHeight - document.getElementById('topbar').offsetHeight - content.offsetHeight) / 2;
if (topMargin < 0) {
    topMargin = 0;
}
content.style.top = topMargin + 'px';

http://jsfiddle.net/SD7SA/

Ответ 5

Интересный вопрос! Я не видел никакого свойства css, которое может это сделать. Но, возможно, он существует. Вы можете попробовать использовать css и javascript таким образом. Используйте css position:relative и js для установки верха. В то время как DCA.height() + 100 <= container.height, установите верхнюю часть DCA в (container.height - DCA.height). В противном случае верхняя часть равна 0, поэтому DCA будет прикрепляться к контейнеру top, предполагая, что контейнер начинается с строки "Содержимое не может пройти эту высоту". Позвольте мне попробовать jsfiddle и отредактировать мой пост.

Вот он:

http://jsfiddle.net/TCHdevlp/gLECE/

Ответ 6

Без JS это возможно, но это будет очень сложно, и, вероятно, вам нужно будет использовать много CSS-кода, что несовместимо со старыми версиями (< 9) IE.

Концепция заключалась в следующем:

• Поместите внешний div горизонтально и вертикально по центру (это трудно, если высота вашего тела не исправлена)
• дайте ему максимальную высоту: 100%
• В этом div создайте внутренний div, который выровнен по вертикали вверху.

Если вы хотите, я мог бы это сделать для вас в jsfiddle.

Ответ 7

Убедитесь, что вы включили объявление html5, используя <!DOCTYPE html>

После этого используйте тег <center style="width:100%;"></center> для централизации вашего элемента.

Любой элемент в указанном выше теге будет централизованным и отзывчивым.