Centering an image within a bootstrap card [duplicate]

Question

I'm having problems centering an image within a bootstrap card.

A similar question has been asked before (How do I center a Bootstrap Card Image) but was removed as a mod deemed it to be a duplicate. However, the answers that have been provided to similar questions do not work for bootstrap cards. Trying various center classes within the img tag didn't seem to work.

My code: HTML:

    <div class="card text-center h-100">
    <img class="card-img-top smallimg" src="IMG/magnifyingGlass.png" alt="Card image cap">
    <div class="card-block catCard">
      <h4 class="card-title">Some text</h4>
      <p class="card-text">Some Text</p>
    </div>
                <div class="card-footer">
        <small class="text-muted">Some Text</small>
    </div>
  </div>

CSS code:

.card-footer{
position:absolute;
  bottom:0;
  width:100%;
}

.smallimg {
    width: 150px; 
    height: 150px;
}

.catCard{
    margin-bottom: 50px; /* height of the footer or more */
}

Answer 1

In Bootstrap 4, the mx-auto class (auto x-axis margins) can be used to center images that are display:block. However, img is display:inline by default so text-center can be used on the parent.