在flexbox中居中列

Question

这是我的目标：

Flex工作和居中工作也是如此。但两者都不起作用：/由于flex，中心选项不再起作用。

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

import { CREATE_PROJECT } from '../../actions/types';

export default function( state = {}, action ) {
  switch( action.type ) {
    case CREATE_PROJECT:
      return { ...state, projects: action.payload }
  }

  return state;
}

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

我该如何解决这个问题？谢谢你＆lt; 3

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