How to center (vertically and horizontally) an image inside a div centered (horizontally) in another div

Question

I would like to have an image centered horizontally and vertically in a div which is also centered (horizontally) in another div.

Something like this:

I imagine this being done like this:

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

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

But I can't manage to find the right CSS rules to achieve this arrangement. Some help would be very much appreciated!

Answer 1

Use flexbox twice, for the inner and outer container, with those settings to center the (only) child:

  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>