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

  
    <span class="flex-item">1</span>
  
  
    <span class="flex-item">2</span>
  
  
    <span class="flex-item">3</span>
  
  
    <span class="flex-item">4</span>
  

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

Ответы на вопрос(10)

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

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

   CENTER

display: flex;

2 - Установить CSS для родительского div наflex-direction: column;

Обратите внимание, что это сделает весь контент в этой строке div сверху вниз. Это будет работать лучше всего, если родительский div содержит только дочерний элемент и ничего больше.

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

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

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

Дон»t забыл использовать важные атрибуты браузера:

align-items: center; ->

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

justify-content: центр; ->

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

Удачи.

добавлять

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

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

С помощьюCSS +


  
    Edit this text...
  

взглянутьВОТ

Я думаю, что вы хотите что-то вроде следующего.

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

     
        1
        2
        3
        4
    

Смотрите демо на:http://jsfiddle.net/audetwebdesign/tFscL/

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

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

Ваш.flex-container свойства в порядке.

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

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

Сноска:

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

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

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

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

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

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



  
  
  JS


  
    
      
        <span class="flex-item">1</span>
      
      
        <span class="flex-item">2</span>
      
      
        <span class="flex-item">3</span>
      
     
        <span class="flex-item">4</span>
    
    


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

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

  <a href="#">text</a>
  <a href="#">text with two lines</a>

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

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

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

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

Вот'HTML для обоих:



    
        <p>DIV #1</p>
    

    
        <p>DIV #2</p>
    


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 

, 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 свойство выравнивает гибкий контейнерs линии в гибком контейнере, когда на поперечной оси есть дополнительное пространство, аналогично тому, какjustify-content выравнивает отдельные элементы в пределах главной оси.Обратите внимание, что это свойство не влияет на однострочный гибкий контейнер.

Подробнее здесь:Как flex-wrap работает с align-self, align-items и align-content?

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

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

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

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

ВАШ ОТВЕТ НА ВОПРОС