Ответ 1

Я не думаю, что вы очень четко представляете, хотите ли вы, чтобы контент div был вертикально центрирован или сам div > . Во всяком случае, есть решение для обоих вариантов:

Вертикальное центрирование фактического div

Сначала решение, которое вертикально выравнивает div 's: jsFiddle

Работает, установив display: table; на .container и display: table-cell; на .row. Как только это будет сделано, вы можете установить vertical-align: middle; на .row для вертикального центрирования его содержимого.

Мне также пришлось вручную заставлять ширину .row быть 960px, это не очень отзывчиво (вы можете исправить это, используя медиа-запросы), но margin-left of -20px, который Bootstrap устанавливает на .row, не работает после установки display: table-cell; на .row. Не принудительное добавление этих дополнительных 20px приведет к тому, что второй div окажется ниже первого, потому что они больше не будут совмещаться в одной строке. Я установил несколько height: 100%; для всех элементов для демонстрационных целей.

CSS

.container {
    margin-top: 10px;
    display: table;
    height: 100%;
}
.row {
    min-width: 960px;
    display: table-cell;
    height: 100%;
    vertical-align:middle;
}

Вертикальное центрирование содержимого div

Если вы хотите вертикально центрировать содержимое div, вы можете сделать это, установив display: table; на .row и установив display: table-cell; на .span6. Вам также нужно избавиться от float: left; на .span6, установив его на float: none.

Вот скрипка, демонстрирующая эту опцию: jsFiddle

Ответ 2

Поскольку вы используете фиксированную высоту и только одну строку, вы можете легко использовать line-height для этого.

.span6:first-child{
    line-height:300px;
}

.span6{
    line-height:170px;
}

Смотрите скрипту: http://jsfiddle.net/mA6Za/1/

Ответ 3

попробуйте сделать это http://jsfiddle.net/mA6Za/2/

<div class="container">
    <div class="row" style="display: table">
        <div class="span6" style="height: 300px; background: red; display: table-cell !important; position: absolute; top: 50%; margin-top: -150px; ">
            Block 1 - Vertically center me please!
        </div>
        <div class="span6 offset6" style="height: 170px; background: blue; display: table-cell !important; vertical-align: middle; top: 50%; margin-top: -85px ;  position: absolute " >Block 2- Center me too
        </div>
    </div>
</div>

Ответ 4

UPDATE

Итак, я ошибся, мой оригинальный ответ не работает, и вот почему. Bootstrap все еще применяет элементы float: left для всех <div class="span*">.

/* From Bootstrap; some differences based on media query */
[class*="span"]
{
   float: left;
   min-height: 1px;
   margin-left: 30px;
}

Вы можете переопределить эти правила, внеся следующий изменения в стиль .cell из моего первоначального ответа:

.cell
{
    display: table-cell;
    float: none;
    vertical-align: middle;
}

Тем не менее, вы потеряете чувствительную "укладку" элементов на небольших экранах (которые, как я думаю, вы не хотите), вместо этого сохраните внешний вид "таблицы". Чтобы этого не произошло, вам, скорее всего, придется сделать стиль display: table; float: none; условным с вашими собственными медиа-запросами.

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

Здесь обновлена ​​скрипка для просмотра: http://jsfiddle.net/7Y8Jv/3/

ОРИГИНАЛЬНЫЙ ОТВЕТ

Это то, что вы ищете: http://jsfiddle.net/7Y8Jv/1/?

Моя разметка и стили не сильно отличаются от ваших, но я получаю вертикальное центрирование, о котором вы просите.

Разметка

<div class="container">
    <div class="row table">
        <div class="span6 cell">What Is Lorem Ipsum?</div>
        <div class="span6 cell">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
    </div>
</div>

CSS

.table
{
    display: table;
}

.cell
{
    display: table-cell;
    vertical-align: middle;
}

Ответ 5

Похоже, вам нужны две строки, каждая из которых занимает половину экрана.

Почему бы не использовать offset3 для перемещения по вашей строке на четверть пути (тем самым помещая ее туда, где вы хотите), а затем по-прежнему используйте span6 в двух отдельных строках:

<div class="container">
    <div class="row">
        <div class="offset3 span6">Block 1 - Vertically center me please!</div>
    </div>
    <div class="row">
        <div class="offset3 span6">Block 2- Center me too</div>
    </div>
</diV>

JSFiddle: http://jsfiddle.net/mA6Za/3/

Ответ 6

Используйте некоторые трюки с jquery...

1) получить высоту пролета с id

2) выполните некоторую математику для верхнего поля

3), тогда установите css

Он также работает с изменением размера окна.

DEMO на jsfiddle... http://jsfiddle.net/q49Da/

HTML

<div class="container"> 
    <div class="row">   
        <div id="red" class="span6" style="background: red;width:40%;float:left;margin-right:5%;">
            Block 1 - Vertically center me please!<br />
            Lorem Ipsum is simply dummy text of the printing and typesetting industry.    Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
        </div>
        <div id="blue" class="span6" style="background: blue;width:40%;float:left;">
            Block 2- Center me too<br />
            Contrary to popular belief, Lorem Ipsum is not simply random text.
        </div>
    </div>
</div>

JQuery

$(document).ready(function() {
    var ver_top = ($(window).height() - $('#red').height()) / 2;
    $('#red').css( "margin-top", ver_top+'px' );

    var ver_top2 = ($(window).height() - $('#blue').height()) / 2;
    $('#blue').css( "margin-top", ver_top2+'px' );

    $(window).resize(function(){
        var ver_top = ($(window).height() - $('#red').height()) / 2;
        $('#red').css( "margin-top", ver_top+'px' );

        var ver_top2 = ($(window).height() - $('#blue').height()) / 2;
        $('#blue').css( "margin-top", ver_top2+'px' );
    });
});