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

Мисля, че искате нещо подобно на следното.

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/

Как да центрирате елементите вертикално и хоризонтално в Flexbox

По-долу са представени две общи решения за центриране.

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

И в двата случая височината на центрираните дивиди може да бъде променлива, неопределена, неизвестна, каквато и да е. Височината на центрираните дивиди няма значение.

Ето 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 (с изключение на декоративните стилове)

Когато елементите flex са подредени вертикално:

#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 свойствата към детето.

За да центрирате вертикално и/или хоризонтално текст или друго съдържание, съдържащо се във флекс елемент, направете елемента (вложен) флекс контейнер и повторете правилата за центриране.

.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 тук: Методи за подравняване на флекс елементи (вж. каре#56).

Центриране на няколко реда flex елементи

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

От спецификацията:

8.4. Опаковане на флекс линиите: свойството align-content свойство

Свойството align-content подравнява линиите на flex контейнера в рамките на флекс контейнера, когато има допълнително пространство в напречната ос, подобно на както justify-content подравнява отделни елементи в рамките на главната ос. Забележете, че това свойство няма ефект върху едноредов флекс контейнер.

Повече подробности тук: https://stackoverflow.com/q/42613359/3597276

Поддръжка на браузъра

Flexbox се поддържа от всички основни браузъри с изключение на IE < 10. Някои скорошни версии на браузъри, като Safari 8 и IE10, изискват префикси на производителя. За бърз начин за добавяне на префикси използвайте Autoprefixer. Повече подробности в този отговор.

Решение за центриране за по-стари браузъри

За алтернативно решение за центриране с помощта на CSS таблица и свойства за позициониране вижте този отговор: https://stackoverflow.com/a/31977476/3597276

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

подравняване на елементите: център; -->

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

Успех.