Vertical Center in CSS

Solution 1: Flexbox

      
      
      <div class="wrapper">
        <div>
          vertical aligned div
        </div>
      </div>
      
      
      .wrapper {
        display: flex;
        flex-direction: column;
        justify-content: center;
        /* add code below to also center horizontally */
        align-items: center;
      }

Compatibility:

Solution 2: top / transformY

      
      
      <div class="wrapper">
        <div class="centered">
          vertical aligned div
        </div>
      </div>
      
      
      .wrapper {
        position: relative;
      }
      .centered {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        /* add code below to also center horizontally */
        left:0;
        right:0;
        margin: 0 auto;
      }

Compatibility:

Solution 3: display table

      
      
      <div class="wrapper">
        <div class="centered">
          vertical aligned div
        </div>
      </div>
      
      
      .wrapper {
        display:table
      }
      .centered {
        display:table-cell;
        vertical-align:middle;
        /* add code below to also center horizontally */
        text-align:center;
      }