Як вирівняти картинку по центру за допомогою 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%);
}

Це основні способи, які дозволять вирівняти картинку по центру блоку. Якщо ви знайшли більш зручний спосіб реалізувати це завдання, поділіться в коментарях.

А якщо залишилися питання, то раджу подивитися відео, де я докладно пояснюю і показую в дії перераховані вище способи.