вертикальное выравнивание с flexbox в IE11 и IE10

Как сделать кросс-браузерное решение, в котором элемент выровнен по вертикали?

http://jsfiddle.net/e2yuqtdt/3/

это работает как в Firefox, так и в Chrome, но не в IE11

<div class="page_login">
    <div>vertical-align:center; text-align:center</div>
</div>

html, body {
    height:100%;
}

.page_login {
    display:flex;
    height:100%;
    width:100%;
    background:#303030;
}

.page_login > div {
    margin:auto;
    background:#fff;
    min-height:100px;
    width:200px;
}

обновление

когда центрированный элемент выше высоты окна просмотра, фон составляет только 100%, а не 100% высоты прокрутки

http://jsfiddle.net/e2yuqtdt/8/

html, body {
    min-height:100%;
    height:100%;
}

.page_login {
    display:flex;
    min-height:100%;
    height:100%;
    width:100%;
    background:#303030;
}

.page_login > div {
    margin:auto;
    background:#fff;
    height:800px;
    width:200px;
}
8
css flexbox internet-explorer internet-explorer-10

2 ответов

как сделать кросс-браузерное решение, где элемент является вертикальным выровняли?

взгляните на эту скрипку:http://jsfiddle.net/5ry8vqkL/

применяемая там техника использует "дисплей: таблица". Вот статья на углубленное подхода http://css-tricks.com/centering-in-the-unknown/

поддерживаемые браузеры можно увидеть здесь: http://caniuse.com/#search=table-cell

HTML:

<div class="container">
    <div id="page-login">
        <div class="panel">Some content</div>
    </div>
</div>

CSS:

html, body {
    min-height:100%;
    height:100%;
}

.container {
    display: table;
    height:100%;
    width:100%;
    background:#303030;
}

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

.panel {
    height: 100px;
    background-color: #fff;
}
3

вам нужно добавить высоту в div. Поскольку вы указали только минимальную высоту, IE автоматически расширяет ее до максимально возможной. Поэтому добавьте высоту, например:

.page_login > div {
     margin:auto;
     background:#fff;
     min-height:100px;
     width:200px;
     height:200px;
}

http://jsfiddle.net/e2yuqtdt/6/

поскольку это коробка flex и, следовательно, предназначена для flex, хорошей идеей может быть сделать высоту в процентах. Таким образом, высота div будет - например-50% от высоты страницы, если страница не будет меньше 200px - тогда это будет 100 Пикс. высокое.

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

На самом деле-достигли его, используя таблицы divs

http://jsfiddle.net/e2yuqtdt/14/

<div>
    <div id="div1">
        <div id="div2">vertical-align:center; text-align:center</div>
    </div>
</div>


#div1 {
    display:flex;
    height:100%;
    width:100%;
    background:#303030;
}

#div2 {
    margin:auto;
    background:#fff;
    height:800px;
    width:200px;
}

Я знаю, что это обновление идет после один Элад.Чэнь-но уже сделал это и опубликовал в комментарии ниже - просто не удосужился обновить вопрос.

2