将flexbox与flex-direction对齐：列到垂直中心

Question

如何将项目与垂直中心对齐？

我同时使用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>

Answer 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>

Answer 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>

Answer 3

添加

justify-content: center 

到.box应该没问题。