Flexbox не центрируется по вертикали в IE

У меня есть простая веб-страница с некоторым содержанием Lipsum по центру страницы. Страница отлично работает в Chrome и Firefox. Если я уменьшу размер окна, содержимое будет заполнять окно до тех пор, пока оно не станет невозможным, а затем добавит полосу прокрутки и заполнит содержимое за пределами экрана в нижней части.

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

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

Примечание. Это приложение нацелено только на последние версии Firefox, Chrome и IE (IE11), все из которых поддерживают кандидат в рекомендации Flexbox , поэтому совместимость функций не должна быть проблемой (теоретически).

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

Изменить : IE11 использует реализацию Flexbox, не зависящую от производителя. Обновления макета гибкого блока («Flexbox»)

Центрируется и правильно меняет размер в Chrome / FF, не центрируется, но правильно меняет размер в IE11

Скрипка: http://jsfiddle.net/Dragonseer/3D6vw/

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

body
{
    margin: 0;
}

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

.inner
{
    width: 80%;
}

Центрируется правильно во всем, срезает верх при уменьшении размера

Скрипка: http://jsfiddle.net/Dragonseer/5CxAy/

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

body
{
    margin: 0;
    display: flex;
}

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

.inner
{
    width: 80%;
}

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

например :

.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;
    }

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

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

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

Я только что протестировал это в 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/

Вот мое рабочее решение (SCSS):

.item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 120px;
  &:after{
    content:'';
    min-height:inherit;
    font-size:0;
  }
}

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

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

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

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

Исходный ответ https://github.com/philipwalton/flexbugs/issues/231#issuecomment-362790042

.flex-container{
min-height:100px;
display:flex;
align-items:center;
}

.flex-container:after{
content:'';
min-height:inherit;
font-size:0;
}

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

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

    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;
    }

У меня нет большого опыта, Flexboxно мне кажется, что принудительная высота на htmlиbody тегах вызывают текст , чтобы исчезнуть на вершине , когда resized-- я был не в состоянии проверить в 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/

Нашел хорошее решение, которое сработало для меня, проверьте эту ссылку https://codepen.io/chriswrightdesign/pen/emQNGZ/?editors=1100 Сначала мы добавляем родительский div, затем меняем min-height: 100% на min- высота: 100vh. Работает как часы.

// by having a parent with flex-direction:row, 
// the min-height bug in IE doesn't stick around.
.flashy-content-outer { 
    display:flex;
    flex-direction:row;
}
.flashy-content-inner {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    min-width:100vw;
    min-height:100vh;
    padding:20px;
    box-sizing:border-box;
}
.flashy-content {
    display:inline-block;
    padding:15px;
    background:#fff;
}  

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

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

Это решение работает для 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/