Flexbox: центр по горизонтали и по вертикали

Как центрировать div горизонтально и вертикально внутри контейнера с помощью flexbox. В приведенном ниже примере я хочу, чтобы каждое число находилось ниже друг друга (в строках), которые расположены по горизонтали.

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
row {
  width: 100%;
}
.flex-item {
  background: tomato;
  padding: 5px;
  width: 200px;
  height: 150px;
  margin: 10px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}
<div class="flex-container">
  <div class="row">
    <span class="flex-item">1</span>
  </div>
  <div class="row">
    <span class="flex-item">2</span>
  </div>
  <div class="row">
    <span class="flex-item">3</span>
  </div>
  <div class="row">
    <span class="flex-item">4</span>
  </div>
</div>

http://codepen.io/anon/pen/zLxBo

+565
источник поделиться
11 ответов

Я думаю, вам нужно что-то вроде следующего.

html, body {
    height: 100%;
}
body {
    margin: 0;
}
.flex-container {
    height: 100%;
    padding: 0;
    margin: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
}
.row {
    width: auto;
    border: 1px solid blue;
}
.flex-item {
    background-color: tomato;
    padding: 5px;
    width: 20px;
    height: 20px;
    margin: 10px;
    line-height: 20px;
    color: white;
    font-weight: bold;
    font-size: 2em;
    text-align: center;
}
<div class="flex-container">
    <div class="row"> 
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
    </div>
</div>

См. демонстрацию по адресу: http://jsfiddle.net/audetwebdesign/tFscL/

Ваши элементы .flex-item должны быть блочными (div вместо span), если вы хотите, чтобы высота и верхнее/нижнее дополнение работали правильно.

Кроме того, на .row установите ширину auto вместо 100%.

Ваши свойства .flex-container прекрасны.

Если вы хотите, чтобы .row располагался по вертикали в порт представления, назначьте 100% высоты html и body, а также обнулите поля body.

Обратите внимание, что для .flex-container требуется высота, чтобы увидеть эффект вертикального выравнивания, в противном случае контейнер вычисляет минимальную высоту, необходимую для помещения содержимого, что меньше высоты порта представления в этом примере.

Сноска:
Свойства flex-flow, flex-direction, flex-wrap могли бы упростить реализацию этой конструкции. Я думаю, что контейнер .row не нужен, если вы не хотите добавлять стиль вокруг элементов (фоновое изображение, границы и т.д.).

Полезный ресурс: http://demo.agektmr.com/flexbox/

+645
источник

Как центрировать элементы по вертикали и по горизонтали в Flexbox

Ниже приведены два общих централизованных решения.

Один для вертикально выровненных элементов гибкости (flex-direction: column), а другой для выровненных по горизонтали элементов (flex-direction: row).

В обоих случаях высота центрированных divs может быть переменной, undefined, неизвестно, что угодно. Высота центрированных divs не имеет значения.

Здесь 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 > ограничена отношениями родитель-потомок. Потомки гибкого контейнера за пределами детей не участвуют в гибкой макете и игнорируют свойства гибкости. По сути, свойства flex не наследуются за пределами детей.

Следовательно, вам всегда нужно применить display: flex или display: inline-flex к родительскому элементу, чтобы применить свойства 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; }

Ознакомьтесь с полями flex auto здесь: Методы выравнивания элементов Flex (см. вставку № 56).


Центрирование нескольких строк элементов гибкости

Когда контейнер flex имеет несколько строк (из-за обертывания), свойство align-content будет необходимо для выравнивания по оси.

Из спецификации:

8.4. Линии гибких линий упаковки: align-contentСвойство

Свойство align-content выравнивает линии гибких контейнеров в пределах гибкий контейнер, когда имеется дополнительное пространство в поперечной оси, аналогично как justify-content выравнивает отдельные элементы на основной оси. Обратите внимание: это свойство не влияет на однострочный контейнер flex.

Подробнее здесь: Как работает flex-wrap с выравниванием, выравниванием и выравниванием содержимого?


Поддержка браузера

Flexbox поддерживается всеми основными браузерами за исключением IE < 10. В некоторых последних версиях браузера, таких как Safari 8 и IE10, требуется префиксы поставщика. Для быстрого добавления префиксов используйте Autoprefixer. Подробнее в этом ответе.


Централизованное решение для старых браузеров

Для альтернативного решения центрирования с использованием таблицы CSS и свойств позиционирования см. этот ответ: fooobar.com/questions/3731/...

+228
источник
другие ответы

Связанные вопросы


Похожие вопросы

Добавить

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

для элемента контейнера, который вы хотите центрировать. Документация:  justify-content и align-items.

+36
источник

display: flex;
align-items: center;
justify-content: center;
+34
источник

Не забывайте использовать важные атрибуты браузера:

align-items: center; →

-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

justify-content: center; →

-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;

Вы можете прочитать эти две ссылки для лучшего понимания flex:  http://css-tricks.com/almanac/properties/j/justify-content/ и  http://ptb2.me/flexbox/

Удачи.

+27
источник

1 - Установите CSS на родительский div на display: flex;

2 - Установите CSS в родительский div в flex-direction: column;
Обратите внимание, что это сделает весь контент в этой строке div сверху вниз. Это будет работать лучше всего, если родительский div содержит только дочерний элемент и ничего больше.

3 - Установите CSS в родительском div в justify-content: center;

Вот пример того, как будет выглядеть CSS:

 .parentDivClass {
 дисплей: flex;
 flex-direction: column;
 justify-content: center;
}Код>
+14
источник

diplay: flex; для него контейнер и margin:auto; для этого изделие работает идеально.

ПРИМЕЧАНИЕ. Вам необходимо настроить width и height чтобы увидеть эффект.

#container{
  width: 100%; /*width needs to be setup*/
  height: 150px; /*height needs to be setup*/
  display: flex;
}

.item{
  margin: auto; /*These will make the item in center*/
  background-color: #CCC;
}
<div id="container">
   <div class="item">CENTER</div>
</div>
+6
источник

Если вам нужно центрировать текст по ссылке, это сделает трюк:

div {
  display: flex;

  width: 200px;
  height: 80px;
  background-color: yellow;
}

a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center; /* only important for multiple lines */

  padding: 0 20px;
  background-color: silver;
  border: 2px solid blue;
}
<div>
  <a href="#">text</a>
  <a href="#">text with two lines</a>
</div>
+3
источник

margin: auto отлично работает с flexbox. Он централизуется вертикально и горизонтально.

html, body {
  height: 100%;
  max-height: 100%;
}

.flex-container {
  display: flex;
    
  height: 100%;
  background-color: green;
}

.container {
  display: flex;
  margin: auto;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS</title>
</head>
<body>
  <div class="flex-container">
    <div class="container">
      <div class="row">
        <span class="flex-item">1</span>
      </div>
      <div class="row">
        <span class="flex-item">2</span>
      </div>
      <div class="row">
        <span class="flex-item">3</span>
      </div>
     <div class="row">
        <span class="flex-item">4</span>
    </div>
  </div>  
</div>
</body>
</html>
+3
источник

Вы можете использовать

display: flex; align-items: center; justify-content: center;

на вашем родительском компоненте

enter image description here https://repl.it/repls/TomatoImaginaryInitialization

0
источник

Использование CSS +

<div class="EXTENDER">
  <div class="PADDER-CENTER">
    <div contentEditable="true">Edit this text...</div>
  </div>
</div>

посмотрите ЗДЕСЬ

-7
источник

Посмотрите другие вопросы по меткам или Задайте вопрос