This may not be a MDB specific question but I can't seem to get the flex commands to respond.  So I am wondering if there is a conflict with MDB or just a different way to do it.   I am trying to get a button only to center on a card.  I have the H1 content centered and then the text or ul left aligned next and then at the bottom the button I want centered.   I saw there was one example but it centered everything on the card, the example I mean is the Image Overlay card example.    

Here is the code I am trying: 

<!-- Card content -->
<div class="card-body">

<!-- Title -->
<h4 class="card-title text-center">Centered Title</h4>
<!-- Text -->
<p class="card-text">
<ul>
<li>Left</li>
<li>Aligned</li>
<li>List</li>
</ul>
</p>
<!-- Button -->
<div class="mb-12 d-flex align-items-center">
<a href="#" class="btn btn-primary d-flex align-self-center">Center This Button</a>
</div>

</div>

Neither the align self on the button or the align items on the div work.  When I inspect the div it is expanded to 100% width inside the card so the button inside should have space to center.   

Can you tell me what I am missing?