Предыдущая версия спецификации CSS Flexible Box Layout устанавливала статическое положение дочерних элементов с абсолютным позиционированием, как если бы они были гибким элементом, размер которого составлял 0 пикселей на 0 пикселей. Последняя версия спецификации полностью выводит их из потока и устанавливает статическое положение на основе свойств align и justify. На момент написания этой статьи Edge и Opera 39 для настольных компьютеров и Android уже поддерживают это.
В качестве примера давайте применим некоторые варианты поведения позиционирования к следующему HTML.
<div class="container">
<div>
<p>In Chrome 52 and later, the green box should be centered vertically and horizontally in the red box.</p>
</div>
</div>
Мы добавим что-то вроде этого:
.container {
display: flex;
align-items: center;
justify-content: center;
}
.container > * {
position: absolute;
}
В Chrome 52 или более поздней версии вложенный <div> будет идеально центрирован в контейнере <div> .
В несовместимых браузерах верхний левый угол зеленого поля будет находиться в верхнем центре красного поля.
Если вы хотите попробовать это самостоятельно в Chrome или любом другом браузере, загрузите наш образец или посетите живую демо-версию .