Trying to vertically align the text center in the following card:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"><div class="row text-center h-100"><div class="col-md-3 text-center my-auto"><div class="card card-block justify-content-center" style="height: 120px"><div class="card-body"> This is some text within a card body.</div></div></div></div>
I am fully aware of the many similar questions here, however I tried various solutions and none of them seems to work for my cards.
I tried my-auto
on parent, card, and card-body. I tried d-flex align-items-center h-100
and justify-content-center
. Also tried to play around with the display property. What am I missing?