Как выровнять картинку по середине окна браузера?

Question

[Ambal89]

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

Answer 1

[WhatIsHTML]

1. Будет располагаться по центру относительно ближайшего предка с position:relative. Если такого нет, то относительно тега body

img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

2. Будет располагаться относительно области просмотра, всегда по центру.

img {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

Comments

[Ambal89]

Большое спасибо!

[WhatIsHTML]

Ambal89: пожалуйста

Answer 2

[alex]

https://jsbin.com/dopemacuki/1/edit?output

<img src="https://unsplash.it/700/300" alt="" />

img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  max-width: 100vw;
  max-height: 100vh;
}