Vertically align an image inside a div with responsive height

Question

I have the following code which sets up a container which has a height that changes with the width when the browser is re-sized (to maintain a square aspect ratio).

Answer 1

html code

css code

img
{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
 }