Centering a Col/Card-panel in materialize

Question

<div class="container">
<div class="row">
<div class="col s5 m5 l5">
<div class="card-panel small blue z-depth-3 center-align">
<h1> Hello </h1>
</div>
</div>
</div>
</div>

What i'm trying to do is center the card panel in the column using Materialize's helper class center-align which didn't work, i also tried using that class on the col s5 m5 l5 element, which also didn't work

can anyone suggest ways to fix this? even if it has to be CSS

EDIT: I did try using materialize's offset utility but it just messes up quite alot

Answer 1

You may achieve centering when you push / pull your columns around. You have a total of 12 cols in a row and lets make your column 6 wide instead of 5 for the sake of the example.

  <div class="row"> 
      <div class="col s6 offset-s3"><span class="flow-text">Centered</span></div>
  </div>

I have divided my row as 3 - 6 - 3 which totals on 12 and the column I want is centered. Check out push / pull examples