Centering image by native CSS
Because a image tag is inline element, you need to change display property to “block” and set margin “auto” to center the image by native CSS.
CSS
.sample { display: block; margin-left: auto; margin-right: auto; }
HTML
<img class="sample" src="sample.jpg" />
Centering image by Bootstrap
Bootstrap prepared centering image setting by specifing class. But it is different between Bootstrap v3 and v4.
Bootstrap v4
In Bootstrap v4, specify “d-block” and “mx-auto” to class.
HTML
<img class="d-block mx-auto" src="sample.jpg" />
Bootstrap v3
In Bootstrap v4, specify “center-block” to class.
HTML
<img class="center-block" src="sample.jpg" />