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

🗓️ Обновлено: 30.01.2022
💬Комментариев: 2
👁️Просмотров: 45409

Как выровнять картинку по центру с помощью 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;
}

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

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

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

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

Не идеальный. Мы можем добавить классу .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%);
}

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

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

Статья была полезной?
👍
Да - 45
👎
Нет - 22
💬Комментарии:
Варвара

Очень полезные советы! И главное, просто и понятно! Спасибо!!!

Anna Iakovleva

Спасибо Вам большое за помощь. Не создала класс для элемента img. С помощью Вашей статьи получилось выровнять картинку по середине.

CSS Головоломки в Telegram
Подписывайся и не пропускай:
Актуальные новости
Интересные задачки
Полезные подборки
Наш рейтинг
🏆Лучшие биржи ссылок
4.8
2
4.0
3.8
4
GoGetLinks
3.5
5
Miralinks
3.5
Наш рейтинг
🏆Лучший хостинг для сайта
9/10
8/10
8/10
4
8/10
8/10
7/10
7/10
Проверка знаний
🤔Хорошо ли вы знаете CSS?
Есть два блочных элемента, которые идут друг за другом в html. Какой будет оступ (margin) между ними, если задать им такие стили:

.top {
  height: 30px;
  background-color: blue;
  margin-bottom: 10px;
}
.bottom {
  height: 30px;
  background-color: red;
  margin-top: 20px;
}
    
10px
20px
30px
Peach Fuzz
🤔Цвет 2024 года
Исследовательский институт Pantone выбрал главный цвет 2024 года. Им стал нежный бархатистый персиковый оттенок, получивший название Peach Fuzz (Персиковый пух).
#febe98