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


116

У меня есть простая веб-страница с некоторым содержанием 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%;
}

На данный момент у меня нет доступа к IE11, пробовали ли вы это решение: stackoverflow.com/questions/16122341/… ?
cimmanon

маржа: auto, похоже, не имеет значения.
Dragonseer

Пожалуйста, сообщите об ошибке Microsoft, по крайней мере, у них будет на одну ошибку меньше в официальном выпуске, как всегда в IE будет что-то (много уникальных ошибок), с
которыми

вам нужно использовать -ms-flexboxдля IE ..
avrahamcool

IE11 использует текущий стандарт отображения Flexbox: flex. msdn.microsoft.com/en-us/library/ie/dn265027(v=vs.85).aspx . Я все равно попробовал, и это не имело значения; контент по-прежнему выровнен по верхнему краю. Также обратите внимание на мою правку в исходном вопросе, в которой говорится, что внешний div центрируется правильно, когда он находится в полноэкранном режиме, но выравнивается по верхнему краю, когда выходит из полноэкранного режима.
Dragonseer

Ответы:


225

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

например :

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

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


9
Не забудьте -ms-flex-align:center;про IE10. Поддержка align-itemsбыла добавлена ​​только в IE11 .
Боаз

Ах! много месяцев спустя это спасло меня - сработала установка высоты вместо минимальной высоты.
Пит

@KaloyanStamatov Попробуйте autoprefixer и помогите избавиться от этих надоедливых проблем с кроссбраузерностью.
hitautodestruct

29
Это решение не работает, когда содержимое больше минимальной высоты. min-heightДействительно переопределить heightправила, но если содержание превышает min-heightэто будет просто выходить за рамки. Ответ на @ericodes решает эту проблему и решение работает на всех браузерах, поддерживающих прогибается.
lachie_h 03

2
Для всех, кто приезжает сюда в 2019 году или позже, лучшим решением на сегодняшний день является решение @ sergey-fedirko, не требующее дополнительных HTML-элементов и жесткой высоты;) Это: stackoverflow.com/a/54796082/134120
AsGoodAsItGets

71

Попробуйте обернуть любой 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/


1
Вы должны опубликовать код, который вы использовали для устранения проблемы, в своем фактическом ответе, а не ссылку на внешний URL-адрес. Тогда ваш ответ будет продолжать быть полезным даже после того, как ссылка умрет.
Келли Келлер-Хейккила

11
Это, безусловно, лучшее решение этой ошибки. Все остальные ответы предполагают фиксированную высоту контейнера, что не работает, если содержимое имеет переменную высоту. Это решение позволяет использовать min-heightвместо жесткого heightправила, сохраняя при этом вертикальное центрирование во всех браузерах, поддерживающих использование display: flex.
lachie_h 03

1
Просто display:flexнеобходимо для оболочки и, возможно, один из них для дочернего элемента: в width: 100% flex-basis:100% flex-grow:1зависимости от вашего содержимого / стиля.
fregante

этот обходной путь не работает, если задано свойство FlexContainerWrapper align-items. Вы должны обернуть исходный flexbox гибким боксом без этого свойства.
Маркус Краль

привет @MarcusKrahl! вы говорите обернуть исходный flexbox (FlexContainer) с помощью flexbox без align-itemsсвойства (FlexContainerWrapper)?
ericodes 02

10

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

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

6

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

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


5

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

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


43
Однако внешне это, по-видимому, не было исправлено.
Blazemonger

4
«Эта проблема, похоже, была исправлена ​​в Microsoft Edge. В настоящее время мы не работаем над ошибками функций в Internet Explorer, кроме проблем, связанных с безопасностью». Они закрыли проблему для версий IE до Edge
Дэвид Зулайка,

1
Похоже, что решение заключается в использовании высоты вместо минимальной высоты, если вы можете.
frodo2975


3

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

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

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

Спасибо за ваш вклад. К сожалению, ваши скрипки не работают в Chrome или IE11. Пример центрирования больше не центрируется в Chrome, а пример центрирования и прокрутки не центрируется в IE11 и по-прежнему отсекает контент.
Dragonseer

1

У меня нет большого опыта, 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/


Спасибо за ваш ответ. Объявление высоты и ширины необходимо для вертикального центрирования в IE. Без него содержимое больше не сосредоточено в IE11.
Dragonseer

Даже с высотой, установленной на внешнем div? Может быть, добавить минимальную высоту к телу?
Тодд

1

Нашел хорошее решение, которое сработало для меня, проверьте эту ссылку 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;
}  

0

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

По какой-то причине, если вы определите минимальную ширину, 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/

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.