How to center image with native CSS and Bootstrap

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.

.sample {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

<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.

<img class="d-block mx-auto" src="sample.jpg" />

Bootstrap v3

In Bootstrap v4, specify “center-block” to class.

<img class="center-block" src="sample.jpg" />