CSS

How to center an <img>?

Method 1: <img> is an inline element. We can center it by converting it to a block element, then use the margin: 0 auto; trick.

img.center {
    display: block;
    margin: 0 auto;
}

Method 2: if the parent element is a block element (e.g. <div>), we can use text-align: center; on the parent.