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