使用 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 工作 up/down，而不是 left/right。

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

此处有更多详细信息：

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>

使用 Flex Box 将内容对齐到中心

justify-content to center using Flex Box

html

css

centering

flexbox