How to center elements vertically and horizontally in Flexbox

Below are two common centering solutions.

One for vertically aligned flex items (flex-direction: column), and the other for horizontally aligned flex items (flex-direction: row).

In both cases, the height of the centered div can be variable, undefined, unknown, and unimportant.

The following is the HTML code for both:

<div id="container"><!-- flex容器 -->

    <div class="box" id="bluebox"><!-- flex项目 -->
        <p>DIV #1</p>
    </div>

    <div class="box" id="redbox"><!-- flex项目 -->
        <p>DIV #2</p>
    </div>

</div>

CSS (excluding decorative styles)

When flex items are stacked vertically:

#container {
    display: flex;           /* 建立flex容器 */
    flex-direction: column;  /* 将主轴设置为垂直方向 */
    justify-content: center; /* 在这种情况下，垂直居中项目 */
    align-items: center;     /* 在这种情况下，水平居中项目 */
    height: 300px;
}

.box {
    width: 300px;
    margin: 5px;
    text-align: center;     /* 将文本在<p>中居中，<p>不是flex项目 */
}

Demo

When flex items are stacked horizontally:

Adjust the flex-direction rules in the above code.

#container {
    display: flex;
    flex-direction: row;     /* 将主轴设置为水平方向（默认设置） */
    justify-content: center; /* 在这种情况下，水平居中项目 */
    align-items: center;     /* 在这种情况下，垂直居中项目 */
    height: 300px;
}

Demo

Center the content of the flexible item

Flexible formatting contextThe scope is limited to the parent-child relationship. Descendants of a flex container beyond its children do not participate in flex layout and will ignore flex properties. Basically, flex properties are not inheritable outside of children.

So you always need to apply display: flex or display: inline-flex to the parent element in order to apply the flex property to the child elements.

To center text or other content vertically and/or horizontally, make the item a (nested) flex container and repeat the centering rules.

.box {
    display: flex;
    justify-content: center;
    align-items: center;        /* 对于单行弹性容器 */
    align-content: center;      /* 对于多行弹性容器 */
}

For more details, see: How to vertically align text in flexbox?

Alternatively, you can apply margin: auto to the content element of the flex item.

p { margin: auto; }

Learn more about flex auto margins here: Ways to align flex items (see box #56).

Centered multi-line flexible item

When the flex container has multiple lines (due to line breaks), the align-content property will be critical for cross-axis alignment.

From specification:

For more details see: How does flex-wrap work with align-self, align-items and align-content?

Browser support

Flexbox is supported by all major browsers, except IE < 10. Some recent browser versions, such as Safari 8 and IE10, require the vendor prefix . To quickly add a prefix, you can use Autoprefixer. See this answer for more details.

Centering solution for old browsers

See this answer for an alternative centering solution using CSS tables and positioning properties: https://stackoverflow.com/a/31977476/3597276

I think what you want is the following.

html, body {
    height: 100%;
}
body {
    margin: 0;
}
.flex-container {
    height: 100%;
    padding: 0;
    margin: 0;
    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>