CSS Flex Box: How to vertically align “flex items” to middle without losing flex item height?

Question

Currently my \"flex\" items look like this (vertically aligned: top)...

 _____________________________________
   1

 _____________________________________
          


        

Answer 1

This is the Flex-way of solving your problem:

HTML

 


    
    
1
    
2
    
3
    
4

CSS

/* Flex Box */
section {
    padding: 1em;
    background: black;
    display: flex;
    flex-flow: column;
    height:100%;
    justify-content: space-around;
}

/* Flex Items */
/* Child selector(>) is used to select 
 elements inside 
 element*/
section > div {
    border-top: 1px solid #ccc;
    background: #f2f2f2;
    height: 25%;

    /* Added code */
    display: flex;       /* Gives inner div flex display */
    align-items: center; /* Centers the div in the cross axis */
    /**************/
}
section > div:first-child {
    border-top: 1px solid transparent;
}
section > div:hover {
    background: white;
}