将 flexbox 与 flex-direction:column 对齐到垂直中心 [重复]答案

【问题标题】：Align flexbox with flex-direction:column to vertical center [duplicate]将 flexbox 与 flex-direction:column 对齐到垂直中心 [重复]
【发布时间】：2019-08-09 13:55:55
【问题描述】：

如何将项目垂直居中对齐？

我同时使用flex-direction: column; 和align-items: center;。

.box{
border: 1px solid red;
width: 100%;
height: 180px;

display: -webkit-box;
display: -ms-flexbox;
display: flex;

-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;

-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}

.item{
width: 20%;
border: 1px solid green;
}

<div class="box">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

【问题讨论】：

我也需要垂直对齐，。红色边框内

标签： css flexbox

【解决方案1】：

希望这对你有用！

.box{
     border: 1px solid red;
    width: 100%;
    height: 300px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    /* -webkit-box-orient: vertical; */
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    justify-content: center;

}
.item{
  width: 20%;
  border: 1px solid green;
}

<div class="box">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

【讨论】：

很好的答案...

【解决方案2】：

将justify-content: center; 添加到.box

.box{
border: 1px solid red;
width: 100%;
height: 180px;

display: -webkit-box;
display: -ms-flexbox;
display: flex;

-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;

-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;

  justify-content: center;
}

.item{
width: 20%;
border: 1px solid green;
}

<div class="box">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

【讨论】：

【解决方案3】：

添加

justify-content: center

到.box应该没问题。

【讨论】：