Содержимое вертикальной вертикальной платформы в разделе

Question

Я пытаюсь вертикально выровнять (в центре) весь мой контент в разделе. Мой текущий CSS работает только для Firefox и Chrome. Он не работает в Safari или IE.

Можете ли вы предложить, как я могу вертикально выровнять следующее, которое будет работать через Safari и IE (8+)?

JSFiddle

<style> 
html, body { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    width: 100%; 
} 

section { 
    min-height: 100%; 
    width: 100%; 
    overflow: hidden; 
    display: flex; 
    align-items: center; 
    vertical-align: middle; 

    background-color: red; 
} 
</style> 

<section> 
    <div class="container vcenter"> 

     <h1> Some VCENTRED long long long long long long long long long text </h1> 

    </div> 
</section> 

Answer 1

Добавить позицию по отношению к вашей секции, а также контейнер, сделать свой дисплей контейнер: встроенный блок, чтобы убедиться, что он не будет потреблять его вертикальное пространство, потому что DIV установлен в качестве блока по умолчанию и нам нужен встроенный блок, затем, наконец, сделайте контейнерную область: 0 auto; чтобы разместить его в середине секции.

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

section { 
    min-height: 100%; 
    width: 100%; 
    overflow: hidden; 
    display: flex; 
    align-items: center; 
    vertical-align: middle; 
    background-color: red; 
    position:relative 
} 
.container 
{ 
    display:inline-block; 
    position:relative; 
    margin:0 auto; 

} 

Fiddle: https://jsfiddle.net/t7vudc77/1/

EDIT

высота пут: 100% в сеанс, IE иногда не может интерпретировать мин-высоту и поставить вертикальную выравнивать: посередине на контейнере. updated fiddle: http://jsfiddle.net/t7vudc77/3/ Я протестировал его в IE-краю, к сожалению, я использую окна, поэтому у меня нет сафари.

section { 
    min-height: 100%; 
    height:100%; 
    width: 100%; 
    overflow: hidden; 
    display: flex; 
    align-items: center; 
    vertical-align: middle; 
    background-color: red; 
    position:relative 
} 
.container 
{ 
    display:inline-block; 
    position:relative; 
    margin:0 auto; 
    vertical-align:middle; 
} 

Это широко используется и используется CSS-dev, поэтому я уверен, что это хорошо поддерживается во всех основных браузерах.