flexbox 中的列居中

Question

这是我的目标：

Flex 有效，居中也有效。但两者都不起作用：/ 由于 flex，centered 选项不再起作用。

我认为，这是由于 CSS 中的那些部分带有两个显示：

.row-flex, .row-flex > div[class*='col-']
{  
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex; /* same height */
        flex: 0 auto;
}

.col-centered
{
        display: inline-block; /* centered */
        float: none;
        text-align: left;
        margin-right: -4px;
}

这是我的Bootply：http://www.bootply.com/rrpj1Y1cBB

我该如何解决这个问题？谢谢

Answer 1

.row-flex, .row-flex > div[class*='col-'] {

        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        flex: 0 auto;

        justify-content: center;       /* NEW; center flex items horizontally */
        align-items: center;           /* NEW; center single-line flex items vertically */
        align-content: center;         /* NEW; center multi-line flex items vertically */

}

Revised Demo

更多详情：How to Center Elements Vertically and Horizontally in Flexbox