Как разместить картинку по центру в html

Question

Вячеслав Межуревский · Accepted Answer

Для того чтобы отцентрировать изображение в блоке документа, проще всего воспользоваться [Flexbox](https://developer.mozilla.org/ru/docs/Learn/CSS/CSS_layout/Flexbox). Для создания условий работы с помощью flex, необходимо "обернуть" центрируемый элемент в контейнер. В нашем пример это просто тег

. Рассмотрим пример: ```html

``` Стили: ```css .img-box { /* Сделаем видимую границу у контейнера */ border: 1px solid #000; width: 300px; height: 300px; /* Включаем режим отображения flex и добавляем центрирование по вертикали и горизонтали */ display: flex; justify-content: center; align-items: center; } ``` Результат: ![enter image description here](https://i.ibb.co/kcd7jks/flex-center-image.png "enter image title here")

Алёна Шереметьева · Answer

Можно сделать через **абсолютное позиционирование** Для начала обернем картинку в контейнер ```

``` и уже его будет центровать HTML код будет выглядеть так: ```html

``` И уже в CSS в класс center мы добавляем свойства ```css img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } ```

Как разместить картинку по центру в html

Ответы

Каталог