Центрирование изображения

Question

Как разместить изображение по центру страницы (центровка по обеим осям)? Прочел множество тем, но в итоге смог изображение отцентрировать только по горизонтали.

Выглядит пока так:

.image-flex {
    display: flex;
    align-items: center;
    justify-content: center;
}

<div class="image-flex">
  <a class="js-button" href="https://www.google.ru/"><img src="var1.jpg" onclick='this.src="var2.jpg"' height="480" width="854"></a>
</div>

Answer 1

Содержимое центруется относительно родителя. А в вашем случае, его высота равнавысоте картинки.

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

.image-flex {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 300px;
}

<div class="image-flex">
  <a class="js-button" href="https://www.google.ru/"><img src="https://via.placeholder.com/150" onclick='this.src="var2.jpg"' height="150" width="150"></a>
</div>

Answer 2

В class напиши left и количество пикселей чтобы он был посередине

БЛОГ НА HUSL

Центрирование изображения

Ответы (2 шт):