How do I vertically center an element inside a table-like column?

Question

I'm having a large div section divided into three columns (it's set to be displayed as a table so every column would be the same height), and I need to vertically center-align the elements (cards) that are located inside each column.

I tried to vertically align the elements (cards) by adding position: relative to the column's class, and adding the following code to the relevant cards' classes:

position: absolute;
top: 50%;
transform: translate(-50%);

But instead of working, it completely messed up and destroyed the page's structure.

I also tried to use vertical-align: middle, but it did absolutely nothing.

This is part of the code that I'm currently having (without the coding attempts mentioned above):

    <div id="cards">
      <div class="col">
        <div class="card card-cyan">
          <h2>Supervisor</h2>
          <p>Monitors activity to identify project roadblocks</p>
        </div>
      </div>
      <div class="col">
        <div class="card card-red">
          <h2>Team Builder</h2>
          <p>Scans our talent network to create the optimal team for your project</p>
        </div>
        <div class="card card-orange">
          <h2>Karma</h2>
          <p>Regularly evaluates our talent to ensure quality</p>
        </div>
      </div>
      <div class="col">
        <div class="card card-blue">
          <h2>Calculator</h2>
          <p>Uses data from past projects to provide better delivery estimates</p>
        </div>
      </div>
    </div>

#cards {
    padding-left: 8%;
    padding-right: 8%;
    display: table;
}

.col {
    display: table-cell;
    padding: 2%;
}

.card {
    border-radius: 10px;
    border: none;
    background-color: #ffffff;
    padding: 2%;
    width: 100%;
}

Any ideas on how to solve this trouble?