How to Center an Image with CSS

Learn how to center an image with CSS. Learn the secrets of perfect image centering using CSS. Master the techniques to ensure your images are flawlessly aligned on any webpage

Centered image:

Paris

How To Center Images

Step 1) Add HTML:

Example

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

Step 2) Add CSS:

To center an image, set left and right margin to auto and make it into a block element:

Example

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

#css