Как центрировать (по вертикали и горизонтали) изображение внутри div по центру (по горизонтали) в другом div

Question

Я хотел бы, чтобы изображение было центрировано по горизонтали и вертикали в div, которое также центрировано (по горизонтали) в другом div.

Примерно так:

Я представляю, как это делается:

<div class="grandad">
  <div class="parent">
    <img src="someUrl"/>
  </div>
</div>

https://codepen.io/lucasactimo/pen/qBOzjwb

Но мне не удается найти нужное CSS правила для достижения этой договоренности. Будем очень признательны за некоторую помощь!

Answer 1

Используйте flexbox дважды, для внутреннего и внешнего контейнера, с этими настройками для центрирования (единственного) дочернего элемента:

  display: flex;
  justify-content: center;
  align-items: center;

.grandad {
  height: 300px;
  border: 1px solid #bbb;
  display: flex;
  justify-content: center;
  align-items: center;
}

.parent {
  height: 200px;
  width: 200px;
  border-radius: 50%;
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center;
}

img {
  height: 64px;
  width: 64px;
}

<div class="grandad">
  <div class="parent">
    <img src="https://p0.pikist.com/photos/915/114/flower-macro-nature-flora-wild-flowers-blossomed-summer-flowers-white-flowers-pollen.jpg" />
  </div>
</div>

Answer 2

justify-content: center; дает вам горизонтальное центрирование, а align-items: center; дает вам вертикальное. Объедините их и вот оно:)

html,
body,
.grandad {
  height: 100%;
}

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

img {
  width: 100px;
}

<div class="grandad">
  <div class="parent">
    <img src="https://p0.pikist.com/photos/915/114/flower-macro-nature-flora-wild-flowers-blossomed-summer-flowers-white-flowers-pollen.jpg" />
  </div>
</div>