Layout run off for different screen size

My app with this button created will run off with different sizes of screen.

For a 7 inch screen, the icon and words tend to skew to top.

for 5 inch, the icon and words tend to skew to bottom

How to make it at the icon and words centered for all the screen sizes?
If the screen size is larger, the icon/words looks larger while if the screen smaller the words and icons to be smaller. The reason is the 6 square that contains icon/words will be depends on the screen size.

Html

  <div id="row2" class="row">
    <a class="col" href="#/app/personalStocks">
      <div class="colwrapper">
        <i class="material-icons">&#xE06D;</i>
        <span>Watchlist</span>
      </div>
    </a>
    <a class="col" href="#/app/stockSearch">
      <div class="colwrapper">
        <i class="material-icons">&#xE8B6;</i>
        <span>Search</span>
      </div>
    <a class="col" href="#/app/screenerSearch">
      <div class="colwrapper">
        <i class="ion-stats-bars"></i>
        <span>Top Movers</span>
      </div>
    </a>
  </div>

  <div id="row3" class="row">
    <a class="col" href="#/app/watchList">
      <div class="colwrapper">
        <i class="icon ion-medkit"></i>
        <span>Portfolio Diagnosis</span>
      </div>
    </a>
    <a class="col" href="#/app/screenerSearch">
      <div class="colwrapper">
        <i class="material-icons">&#xE152;</i>
        <span>Screener</span>
      </div>
    </a>
    <a class="col" href="#/app/stockScreener">
      <div class="colwrapper">
        <i class="material-icons">&#xE417;</i>
        <span>Snapshot</span>
      </div>
    </a>
  </div>

css

#row2 .col .colwrapper, #row3 .col .colwrapper{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 55%;
  width: auto;
  text-align: center;
  margin-top: 25px;
}
#row2 .col .colwrapper i, #row3 .col .colwrapper i{
  font-size: 30px;
}
#row2 .col img, #row3 .col img{
  position: relative;
  display: block;
  height: 75%;
  width: auto;
  left: 0;
  right: 0;
  margin: auto;
}
#row2 .col span, #row3 .col span{
  display: block;
}

I am adding flexbox but did not take effect:

#row2 .col .colwrapper i, #row3 .col .colwrapper i{
  font-size: 30px;
  align-content: center;
  align-items: center;
  align-self: center;
}

Please advice