How to center an image

Learn how to center images using CSS.

Centering images:

Tulip

How to center an image

Step 1 - Add HTML:

<img src="paris.jpg" alt="Paris" class="center">

Step 2 - Add CSS:

To center the image, set the left and right margins to autoand set it as a block element:

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

Try it yourself

Please note that if the width is set to 100%If it is full width, it cannot be centered.

Related pages

Tutorial:CSS image