Vertical align card-content in Materialize card

I'm just trying to vertical align the text in the card and not impact anything else. You can see what I'm doing here: Working example

My very simple code is here:

<body>
  <div class="container">
    <div class="row top-pad">
      <div class="col s4">
        <%= image_tag "logo.png", class:"responsive-img" %>
      </div>
  </div>
    <img class="responsive-img" src="cool_pic.jpg">

  <div class="container vert-align">
      <div class="row">
        <div class="col s4 offset-s4">
          <div class="card medium">
            <div class="card-image">
              <%= image_tag "hi2.png" %> 
              <!--<span class="card-title">Card Title</span>-->
            </div>
            <div class="card-content">
              <p>Welcome to FBA Shipping by ByteStand.
                A super simple way to automate fulfilling FBA items
                in the US and abroad.</p>
            </div>
            <div class="card-action">
              <button class="waves-effect btn stroke-btn">Let's Get Started!</button>
            </div>
          </div>
        </div>
      </div>
  </div>
</body>

I've tried valign-wrapper everywhere as well as vert-align all to no avail.

Here is my entire CSS as well:

.vert-align {
  margin: 0px;
    padding: 0px;
    float: left;
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    left: 50%;
}

.stroke-btn {
  background-color: white !important;
  border-style: solid;
  border-width: 1px;
  border-color: #311b92;
  color: #311b92 !important;
}

.top-pad {
  padding-top: 20px;
}

.card { 
    max-width: 400px;
    overflow: hidden; 
}

.custom-align .card {
  display: flex;
  flex-direction: column;
}

.custom-align .card-content {
  flex: 1;
  max-height: 100% !important;
  align-items: center;
  display: flex;
  margin-bottom: 50px;
}

Solution

You can add a custom class to the container (for example replace vert-align with custom-align) and then try flex by adding this CSS code :

.custom-align .card {
  display: flex;
  flex-direction: column;
}

.custom-align .card-content {
  flex: 1;
  max-height: 100%;
  align-items: center;
  display: flex;
  margin-bottom: 50px;
}

Am not sure about the remaining CSS of the page, so if it's not working you may add more specifity or use important