调整内容以使用Flex Box居中

Question

我正在尝试将div对准页面的中心，但是我无法弄清楚如何使用对齐选项。

现在是这样的：

html：

<div class="flex-container">

  <div class="box" *ngFor='let movie of moviesArray;let i=index'>
    ....
  </div>

</div>

css：

.flex-container{
    display: flex;
    background-color: white;
    flex-flow: column;
    flex-wrap: wrap;
    margin:0 auto;

}

.box{
    width:80%;
    flex: 0 0 100px;
    background-color:#f4f4f4;
    margin:10px 0;
    padding:20px;

}



....

感谢任何帮助：）

Answer 1

在flex-direction: column中，主轴切换为垂直对齐，并且justify-content向上/向下而不是向左/向右工作。

在align-items中，使用flex-direction: column来水平居中。

此处有更多详细信息：In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

Answer 2

.flex-container{
    display: flex;
    background-color: white;
    flex-flow: column;
    flex-wrap: wrap;
    margin:0 auto;

}

.box{
    display: flex;
    align-items: center;
    justify-content: center;
    width:80%;
    flex: 0 0 100px;
    background-color:#f4f4f4;
    margin:10px 0;
    padding:20px;

}

<div class="flex-container">

  <div class="box" *ngFor='let movie of moviesArray;let i=index'>
    ..................
  </div>

</div>