Align flexbox with flex-direction:column to vertical center

Question

How to align items to vertical center?

I am using both flex-direction: column; and 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>

I need to align vertically also,. inside the red border – Felix A J Mar 19 '19 at 05:37 — Felix A J, Mar 19 '19 at 05:37

score 5 · Accepted Answer · answered Mar 19 '19 at 05:40

Hope This Will Work For You!

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

1

Great Answer... – Mr. Perfectionist May 27 '20 at 12:30

score 3 · Answer 2 · answered Mar 19 '19 at 05:41

Add justify-content: center; to .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>

score 2 · Answer 3 · answered Mar 19 '19 at 05:41

2

Adding

justify-content: center

to .box should be ok.

answered Mar 19 '19 at 05:41

huan feng

7,307
2
32
56

Align flexbox with flex-direction:column to vertical center

3 Answers3