Как центрировать элементы по вертикали и горизонтали во Flexbox
Ниже приведены два общих решения для центрирования.
Один для выровненных по вертикали изгибаемых элементов ( flex-direction: column), а другой для горизонтально выровненных изогнутых элементов ( flex-direction: row)
В обоих случаях высота центрированных элементов может быть переменной, неопределенной, неизвестной, что угодно. Высота центрированных элементов не имеет значения.
Вот HTML для обоих:
<div id="container"><!-- flex container -->
<div class="box" id="bluebox"><!-- flex item -->
<p>DIV #1</p>
</div>
<div class="box" id="redbox"><!-- flex item -->
<p>DIV #2</p>
</div>
</div>
CSS (исключая декоративные стили)
Когда гибкие элементы сложены вертикально:
#container {
display: flex; /* establish flex container */
flex-direction: column; /* make main axis vertical */
justify-content: center; /* center items vertically, in this case */
align-items: center; /* center items horizontally, in this case */
height: 300px;
}
.box {
width: 300px;
margin: 5px;
text-align: center; /* will center text in <p>, which is not a flex item */
}
DEMO
Когда гибкие элементы сложены горизонтально:
Настройте flex-directionправило из кода выше.
#container {
display: flex;
flex-direction: row; /* make main axis horizontal (default setting) */
justify-content: center; /* center items horizontally, in this case */
align-items: center; /* center items vertically, in this case */
height: 300px;
}
DEMO
Центрирование содержимого гибких элементов
Область контекста гибкого форматирования ограничена отношениями родитель-потомок. Потомки гибкого контейнера за пределами дочерних элементов не участвуют в гибком макете и будут игнорировать свойства flex. По сути, гибкие свойства не наследуются за пределами детей.
Следовательно, вам всегда нужно применять display: flexили display: inline-flexк родительскому элементу, чтобы применить свойства flex к дочернему элементу.
Для вертикального и / или горизонтального центрирования текста или другого содержимого, содержащегося в гибком элементе, сделайте элемент (вложенным) гибким контейнером и повторите правила центрирования.
.box {
display: flex;
justify-content: center;
align-items: center; /* for single line flex container */
align-content: center; /* for multi-line flex container */
}
Подробнее здесь: Как выровнять текст по вертикали во flexbox?
Кроме того, вы можете применить margin: autoк элементу содержимого элемента flex.
p { margin: auto; }
Узнайте о autoполях сгиба здесь: Методы выравнивания элементов Flex (см. Вставку № 56).
Центрирование нескольких строк изгибаемых элементов
Когда гибкий контейнер имеет несколько строк (из-за переноса), align-contentсвойство будет необходимо для выравнивания по оси.
Из спецификации:
8.4. Упаковочные линии Flex: align-content
собственность
align-contentСвойство совмещается линии гибкого контейнера внутри гибкого контейнера , когда имеется дополнительное пространство в поперечной оси, подобно тому , как justify-contentВыравнивает отдельные элементы в главной оси.
Обратите внимание, что это свойство не влияет на однострочный гибкий контейнер.
Подробнее здесь: Как flex-wrap работает с align-self, align-items и align-content?
Поддержка браузера
Flexbox поддерживается всеми основными браузерами, кроме IE <10 . В некоторых последних версиях браузеров, таких как Safari 8 и IE10, требуются префиксы поставщиков . Для быстрого добавления префиксов используйте Autoprefixer . Подробнее в этом ответе .
Центрирующее решение для старых браузеров
Для альтернативного решения для центрирования, использующего таблицу CSS и свойства позиционирования, смотрите этот ответ: https://stackoverflow.com/a/31977476/3597276
