Как сделать картинку по центру в css

Узнайте, как при помощи CSS сделать картинку по центру: используйте margin: auto, чтобы задать позицию, и для достижения лучшего отображения добавьте display: block.

Центрирование картинки в CSS

Центрирование картинки в CSS — достаточно простое и понятное действие, но для того, чтобы достичь наилучшего результата, следует понимать некоторые принципы верстки.

В первую очередь, нужно обернуть вашу картинку в блок и присвоить ему соответствующие стили. Для центрирования можно использовать свойство display: flex; и выставить значение margin: 0 auto;. Вот пример кода:

.block {
  display: flex;
  margin: 0 auto;
}

img {
  max-width: 100%;
  height: auto;
}

Здесь мы присвоили блоку .block свойство display: flex; и значение margin: 0 auto;, чтобы сделать его центрированным. Далее мы присвоили картинке свойства max-width: 100%; и height: auto;, чтобы сохранить пропорции изображения при масштабировании.

Другой подход для центрирования изображения заключается в использовании свойства margin. В этом случае нам нужно вычислить положение изображения по центру и присвоить ему значение margin-left и margin-right. Вот пример кода:

img {
  max-width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

Оба способа центрирования картинки в CSS будут давать одинаковые результаты, но первый способ предпочтительнее, поскольку он более понятен и адаптивен.