Как выровнять картинку по центру с помощью CSS

В этой статье рассмотрим, какие есть методы выравнивания картинки по центру блока.

Давайте создадим нашу разметку, с которой будем работать.

Создадим класс .wrap и внутрь его добавим картинку с классом .photo

<div class="wrap">
  <img 
    src="https://images.unsplash.com/photo-1606421049683-c346eb99fafd?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw2N3x8fGVufDB8fHw%3D&auto=format&fit=crop&w=500&q=60" 
    class="photo">
</div>

Теперь перейдем к css. Зададим фиксированную ширину и высоту для блока, а также добавим для него border — чтобы мы видели границы элемента:

.wrap {
  width: 500px;
  height: 500px;
  border: 1px solid #000000;
}

А для самой картинки зададим ширину 250px:

.photo {
  width: 250px;
}

Вот так сейчас выглядит наша разметка:

Разметка готова, теперь перейдем к вариантам, как можно выровнять картинку по центру блока.

Первый вариант

Не идеальный. Мы можем добавить классу .wrap свойство text-align:center; и тогда все, что внутри блока будет отцентрировано по горизонтальной оси.

.wrap {
  width: 500px;
  height: 500px;
  border: 1px solid #000000;
  text-align: center;
}
.photo {
  width: 250px;
}

Есть еще вариант, как разместить картинку по центру. Для этого нужно ее перевести в блочный элемент, и с помощью margin: auto; выставить по центру:

.photo {
  width: 250px;
  display: block;
  margin: auto;
}

Далее мы перейдем к вариантам, которые позволят нам выровнять картинку по центру блока и выровнять ее по вертикали.

Второй вариант

С помощью display: flex мы можем отцентрировать не только по оси x, но и по оси y. Давайте добавим классу .wrap следующие свойства:

.wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

Получим следующую картину:

А если пропишем следующий код:

.wrap {
  width: 500px;
  height: 500px;
  border: 1px solid #000000;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

То по горизонтальной оси выровняем по правому краю (свойство justify-content: flex-end), а с помощью align-items: flex-end; выровняем изображение по нижнему краю.

Третий вариант

Если предыдущие два варианта центрировали не только картинку, но и любое содержимое внутри блока .wrap, то следующий вариант будет относиться только к картинке.

.wrap {
  width: 500px;
  height: 500px;
  border: 1px solid #000000;
  position: relative
}
.photo {
  width: 250px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Это основные способы, которые позволят вам выровнять картинку по центру блока. Если вы нашли более удобный способ реализовать данную задачу, делитесь в комментариях.

А если остались вопросы, то советую посмотреть видео, где я подробно объясняю и показываю в действии вышеперечисленные способы.