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

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

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

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

Создадим класс .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%);
}

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

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

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

CSS Головоломки в Telegram
Подписывайся и не пропускай:
Актуальные новости
Интересные задачки
Полезные подборки
Наш рейтинг
🏆Лучший хостинг для сайта
9/10
8/10
8/10
4
8/10
8/10
7/10
7/10
Что читают?
🏆Популярные записи
Как сделать гамбургер (бургер) меню — готовый код и подробное объяснение
Просмотров: 27370
Появление элементов при скролле
Просмотров: 23797
Как сделать плавное увеличение картинки при наведении — эффект на чистом CSS
Просмотров: 14740
Как выровнять картинку по центру с помощью CSS
Просмотров: 12970
Перенос сайта на Тильде на свой хостинг. Пошаговое руководство
Просмотров: 10751
Проверка знаний
🤔Хорошо ли вы знаете CSS?
Есть два блочных элемента, которые идут друг за другом в html. Какой будет оступ (margin) между ними, если задать им такие стили:

.top {
  height: 30px;
  background-color: blue;
  margin-bottom: 10px;
}
.bottom {
  height: 30px;
  background-color: red;
  margin-top: 20px;
}
    
10px
20px
30px
Viva Magenta
🤔Цвет 2023 года
Исследовательский институт Pantone выбрал главный цвет 2023 года. Им стал карминово-красный оттенок с фиолетовым подтоном, который назвали Viva Magenta.
#bb2649