How TO - Center Images
Learn how to center an image with CSS.
Centered image:
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%;
}
Try it Yourself »
Note that it cannot be centered if the width is set to 100% (full-width).
Tip: Go to our CSS Images Tutorial to learn more about how to style images.
