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

Michael_B
Редактировал вопрос 22-го октября 2016 в 9:38
Программирование
html5 css3 html css flexbox
26-го сентября 2013 в 11:22
32 просмотров
Комментарии к вопросу (2)
Решение

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

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/

nalzok
Редактировал ответ 26-го октября 2016 в 9:34
Комментарии (8)

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

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

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

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

Вот HTML для обоих случаев:.

<div id="container">

    <div class="box" id="bluebox">
        <p>DIV #1</p>
    </div>

    <div class="box" id="redbox">
        <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](http://jsfiddle.net/8o29y7pd/)

Когда гибкие элементы укладываются горизонтально:

Скорректируйте правило 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](http://jsfiddle.net/8o29y7pd/3/)

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

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

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

Более подробная информация здесь: https://stackoverflow.com/q/25311541/3597276

В качестве альтернативы вы можете применить margin: auto к элементу содержимого гибкого элемента.

p { margin: auto; }

Узнайте о полях flex auto здесь: Methods for Aligning Flex Items (см. врезку#56).

Выравнивание нескольких строк элементов flex

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

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

8.4. Упаковка гибких строк: свойство align-content свойство

Свойство align-content выравнивает линии флекс-контейнера в пределах &gt. flex-контейнера при наличии дополнительного пространства по поперечной оси, аналогично тому. как justify-content выравнивает отдельные элементы по оси main. *Примечание: это свойство не влияет на однострочный гибкий контейнер.>.

Более подробная информация здесь: https://stackoverflow.com/q/42613359/3597276

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

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

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

Альтернативное решение для центрирования с помощью таблицы CSS и свойств позиционирования см. в этом ответе: https://stackoverflow.com/a/31977476/3597276.

Michael_B
Редактировал ответ 3-го сентября 2017 в 11:07
Комментарии (5)

Добавить 

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

в контейнер элемент, что вы хотите в центра. Документация: оправдать-Содержание и выравнивание-товары.

Комментарии (1)

Не забывайте использовать важные атрибуты, специфичные для браузеров:

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/

Удачи.

Комментарии (6)

1 - установить CSS на родительский div, чтобы дисплей: гибкий;<БР>

2 - установить CSS на родительский div, чтобы флекс-направление: колонка;`<БР> обратите внимание, что все содержимое в этой линии див сверху донизу. Это будет работать лучше, если родитель div содержит только ребенок и ничего больше.<БР>

3 - набор CSS на родительский div, чтобы оправдать-содержание: центр;

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

в 

.parentDivClass {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

в

Комментарии (0)

`Ши: гибкий; за это'контейнер с запасом и:авто; за это's элемент работает идеально.

Примечание: Вы должны установить ширина и высота, чтобы увидеть эффект.

в 

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

в

Комментарии (0)

рентабельность: строительство авто идеальный с Модель Flexbox. Его централизация по вертикали и горизонтали.

в 

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

.flex-container {
  display: flex;

  height: 100%;
  background-color: green;
}

.container {
  display: flex;
  margin: auto;
}



  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  JS


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

в

Комментарии (0)

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

в 

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>

в

Комментарии (1)

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

дисплей: шлейф; выровнять элементы: центр; оправдать-содержание: центр;`

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

https://repl.it/repls/TomatoImaginaryInitialization

Комментарии (0)

Используя УСБ+

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

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

Комментарии (1)