bootstrap 4 card image horizontal center problem [duplicate] - css

Question

This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 1 year ago.
Problem: unable to horizontally center the image:
Please see the code example here:
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
.index-img-container {
width: 200px;
height: 200px;
}
.index-img {
max-width: 100%;
max-height: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<div class="card ">
<div class="card-block m-1">
<a href="" target="_blank" class="nounderline">
<div class="index-img-container d-flex align-items-center justify-content-center">
<img class="index-img" src="https://picsum.photos/536/354">
</div>
<div class="card-body card-body-fix">
<div class="text-secondary font-italic">Title here</div>
<h6 class="card-title text-dark card-title-text">
Some text is shown here with The Lorem Ipsum for photos.
</h6>
<span class="text-space-no-wrap">
<span class="card-text text-danger">Important message</span>
<span class="card-text h5 text-secondary small"></span>
</span>
<br><span class="font-italic text-secondary small">+ Some note</span>
</div>
</a>
<a class="btn btn-info w-100" href="" target="_blank" role="button">View Details</a>
</div>
</div>
If I removed the css class "index-img-container", the image will be centered.
.index-img-container {
width: 200px;
height: 200px;
}
I am unable to understand how this size-defining class can cause the image to align to left. But in order to keep all images the same size this class cannot be removed. Is there a solution?
Thanks.

Answer 1

You could add auto margin to your class to encourage centering:
.index-img-container {
width: 200px;
height: 200px;
margin: auto;
}