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

Для того, чтобы выровнять картинку по середине контейнера с помощью CSS, можно использовать следующие методы:

1. С помощью свойства text-align:

HTML:

<div class="container">
  <img src="path/to/image.jpg" alt="alt text">
</div>

CSS:

.container {
  text-align: center;
}

img {
  display: inline-block;
}

Пояснение: контейнер .container имеет свойство text-align: center;, которое выравнивает содержимое по центру контейнера. Затем, картинка стилизуется с помощью стиля display: inline-block;, чтобы избежать проблемы с вложенностью.

2. С помощью свойств flexbox:

HTML:

<div class="container">
  <img src="path/to/image.jpg" alt="alt text">
</div>

CSS:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

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

Пояснение: контейнер .container имеет свойства display: flex; justify-content: center; align-items: center; height: 100vh;, которые выравнивают содержимое по центру экрана. Затем, картинка стилизуется с помощью стилей max-width и max-height, чтобы она занимала максимально возможное пространство контейнера и не была больше самой картинки.

Оба метода можно дополнить дополнительными стилями, чтобы получить желаемый результат.