Flexbox Не центрирование по вертикали в IE

Ответ 1

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

например:

.outer
    {
       display: -ms-flexbox;
       display: -webkit-flex;
       display: flex;

       /* Center vertically */
       align-items: center;

       /*Center horizontaly */
       justify-content: center;

       /*Center horizontaly ie */
       -ms-flex-pack: center;

        min-height: 220px; 
        height:100px;
    }

Итак, теперь у нас есть стиль height, но min-height перезапишет его. Таким образом, мы счастливы, и мы все еще можем использовать min-height.

Надеюсь, это поможет кому-то.

Ответ 2

Попробуйте обернуть любой div, который вы используете flexboxed с flex-direction: column в контейнере, который также является гибким.

Я только что протестировал это в IE11, и он работает. Нечетное исправление, но пока Microsoft не сделает внутреннее исправление ошибок внешним... это нужно будет сделать!

HTML:

<div class="FlexContainerWrapper">
    <div class="FlexContainer">
        <div class="FlexItem">
            <p>I should be centered.</p>
        </div>
    </div>
</div>

CSS

html, body {
  height: 100%;
}

.FlexContainerWrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.FlexContainer {
  align-items: center;
  background: hsla(0,0%,0%,.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
  width: 600px;
}

.FlexItem {
  background: hsla(0,0%,0%,.1);
  box-sizing: border-box;
  max-width: 100%;
}

2 примера для тестирования в IE11: http://codepen.io/philipwalton/pen/JdvdJE http://codepen.io/chriswrightdesign/pen/emQNGZ/

Ответ 3

Это известная ошибка, которая, как представляется, была исправлена ​​внутри Microsoft.

https://connect.microsoft.com/IE/feedback/details/802625/min-height-and-flexbox-flex-direction-column-dont-work-together-in-ie-10-11-preview

Ответ 4

Я обновил обе скрипки. я надеюсь, что это сделает вашу работу.

центрирование

    html, body
{
    height: 100%;
    width: 100%;
}

body
{
    margin: 0;
}

.outer
{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inner
{
    width: 80%;
    margin: 0 auto;
}

центр и прокрутка

html, body
    {
        height: 100%;
        width: 100%;
    }

    body
    {
        margin: 0;
        display:flex;
    }

    .outer
    {
        min-width: 100%;  
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .inner
    {
        width: 80%;
    margin-top:40px;
    margin: 0 auto;
    }

Ответ 5

У меня нет большого опыта работы с Flexbox, но мне кажется, что принудительная высота тегов html и body заставляет текст исчезать сверху при изменении размера. Я не мог тест в IE, но я нашел тот же эффект в Chrome.

Я разветкил вашу скрипку и удалил объявления height и width.

body
{
    margin: 0;
}

Также казалось, что параметры flex должны применяться к другим элементам flex. Однако применение display: flex к .inner вызвало проблемы, поэтому я явно установил .inner в display: block и установил .outer в flex для позиционирования.

Я установил минимальную высоту .outer, чтобы заполнить область просмотра, display: flex и установить горизонтальное и вертикальное выравнивание:

.outer
{
    display:flex;
    min-height: 100%;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
}

Я установил .inner в display: block явно. В Chrome это выглядело как унаследованное flex от .outer. Я также устанавливаю ширину:

.inner
{
    display:block;
    width: 80%;
}

Это устранило проблему в Chrome, надеюсь, она может сделать то же самое в IE11. Здесь моя версия скрипта: http://jsfiddle.net/ToddT/5CxAy/21/

Ответ 6

На всякий случай кто-то попадает сюда с тем же вопросом, который у меня был, который специально не упоминается в предыдущих комментариях.

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

Ответ 7

Если вы можете определить ширину и высоту родителя, существует более простой способ централизовать изображение, не создавая для него контейнер.

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

Это решение работает для IE10 +, Firefox и Chrome.

<div>
  <img src="http://placehold.it/350x150"/>
</div>

div {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    border: 1px solid orange;
    width: 100px;
    height: 100px;
}

img{
  min-width: 10%;
  max-width: 100%;
  min-height: 10%;
  max-height: 100%;
}

https://jsfiddle.net/HumbertoMendes/t13dzsmn/