Как центрировать изображение средствами CSS?

Question

Accepted Answer

## Суть на практике

Зависит от контекста: в строке, в блоке, как фон.

```css
/* блок-картинка по горизонтали */
img.hero {
  display: block;
  margin-inline: auto;
  max-width: 100%;
}
/* в flex-контейнере */
.wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* фон */
.cover {
  background: url(a.jpg) center / cover no-repeat;
}
```

Для `inline`/`inline-block` иногда хватает `text-align: center` на родителе.

## Итог

Самые частые ответы на собесе: `margin: auto` для block-img и Flex/Grid для произвольного центрирования.