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

Я думаю, ти хочеш чогось подібного.

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-flowflex-directionflex-wrap.row

Корисний ресурс: http://demo.agektmr.com/flexbox/

Як центрувати елементи вертикально та горизонтально у 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 та ігнорують властивості 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 */
}

Детальніше тут: Як вертикально вирівняти текст всередині флекси?

Крім того, ви можете застосувати margin: autoдо елемента вмісту елемента flex.

p { margin: auto; }

Дізнайтеся про autoполя згину тут: Методи вирівнювання гнучких елементів (див. Поле № 56).

Центрування декількох ліній гнучких предметів

Якщо в гнучкому контейнері є кілька ліній (за рахунок обгортання), align-contentвластивість буде необхідною для вирівнювання по осі.

З специфікації:

8.4. Упаковка Flex Lines: align-content властивість

align-contentВластивість поєднується лінії гнучкого контейнера всередині гнучкого контейнера , коли є додатковий простір в поперечної осі, подібно до того , як justify-contentвирівнює окремі елементи в головній осі. Зауважте, ця властивість не впливає на однолінійний гнучкий контейнер.

Докладніше тут: Як працює flex-обгортка з align-self, items-items та align-content?

Підтримка браузера

Flexbox підтримується всіма основними браузерами, крім IE <10 . Деякі останні версії браузера, такі як Safari 8 та IE10, вимагають префіксів постачальника . Для швидкого способу додавання префіксів використовуйте Autoprefixer . Детальніше у цій відповіді .

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

Альтернативне рішення центрування з використанням таблиці CSS та властивостей позиціонування див. У цій відповіді: https://stackoverflow.com/a/31977476/3597276

Додайте

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

до елемента контейнера, що ви хочете відцентрувати. Документація: виправдовувальний вміст та елементи вирівнювання .

Не забудьте використовувати важливі атрибути веб-переглядачів:

вирівняти елементи: центр; ->

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

виправдати-зміст: центр; ->

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

Ви можете прочитати ці два посилання для кращого розуміння флексу: http://css-tricks.com/almanac/properties/j/justify-content/ та http://ptb2.me/flexbox/

Щасти.

1 - Встановіть CSS для батьківського поділу на display: flex;

2 - Встановіть CSS на батьківський діл на flex-direction: column;
Зверніть увагу, що це зробить весь вміст у цій діловій лінії зверху вниз. Це найкраще спрацює, якщо батьківський дів містить лише дитину та більше нічого.

3 - Встановіть CSS для батьківського поділу на justify-content: center;

Ось приклад того, як буде виглядати CSS:

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

Ви можете скористатися

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

на ваш батьківський компонент

https://repl.it/repls/TomatoImaginaryInitialization

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>

Якщо вам потрібно центрувати текст у посиланні, це зробить фокус:

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>

margin: autoпрекрасно працює з флексбоком. Він централізується вертикально і горизонтально.

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>

РЕЗУЛЬТАТ:

КОД

HTML:

<div class="flex-container">
  <div class="rows">

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

CSS:

html, body {
  height: 100%;  
}

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

.rows {
  display: flex;
  flex-direction: column;
}

де flex-containerdiv використовується для центрування вертикально та горизонтально вашого rowsdiv, а rowsdiv використовується для групування ваших "елементів" та впорядкування їх у колонці на основі стовпця.

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

Використання CSS +

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

подивіться ТУТ