How can I center an image using Flex?

Question

I have already centered the div in the page using Flex and now I want to center the image in the div.

I feel like I am using to many properties in my original centering and do not know if I am doing it correctly.

https://jsfiddle.net/fLkz49nj/

#auth_top{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100vh;    
}
#auth{
  width:  250px;
  height:  185px;
  background: rgba(255,255,200,0.5);
  box-shadow:   0px 1px 3px rgba(25, 25, 25, 0.4);
}

#auth_google_link{
  width: 64px;
  height: 64px;
  display: block;
}
#auth_google_img{
  width: 64px;
  border: 1px solid white;
  border-radius: 2px;
}
#auth_google_img:hover{
  border: 1px solid black;
}

Answer 1

You can put #auth inside the flexbox and center it.

#auth_top{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100vh;    
}
#auth{
  width:  250px;
  height:  185px;
  background: rgba(255,255,200,0.5);
  box-shadow:   0px 1px 3px rgba(25, 25, 25, 0.4);
  display: flex;     /* added style from here */
  justify-content: center;
  align-items: center;
}
  
  
#auth_google_link{
  width: 64px;
  height: 64px;
  display: block;
}
#auth_google_img{
  width: 64px;
  border: 1px solid white;
  border-radius: 2px;
}
#auth_google_img:hover{
  border: 1px solid black;
}

<div id='auth_top'>

  <div id='auth'>

    <a id='auth_google_link' href="/auth/google">
      <img id='auth_google_img' src='data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRw%0D%0AOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNDggNDgiPjxkZWZzPjxwYXRo%0D%0AIGlkPSJhIiBkPSJNNDQuNSAyMEgyNHY4LjVoMTEuOEMzNC43IDMzLjkgMzAuMSAzNyAyNCAzN2Mt%0D%0ANy4yIDAtMTMtNS44LTEzLTEzczUuOC0xMyAxMy0xM2MzLjEgMCA1LjkgMS4xIDguMSAyLjlsNi40%0D%0ALTYuNEMzNC42IDQuMSAyOS42IDIgMjQgMiAxMS44IDIgMiAxMS44IDIgMjRzOS44IDIyIDIyIDIy%0D%0AYzExIDAgMjEtOCAyMS0yMiAwLTEuMy0uMi0yLjctLjUtNHoiLz48L2RlZnM+PGNsaXBQYXRoIGlk%0D%0APSJiIj48dXNlIHhsaW5rOmhyZWY9IiNhIiBvdmVyZmxvdz0idmlzaWJsZSIvPjwvY2xpcFBhdGg+%0D%0APHBhdGggY2xpcC1wYXRoPSJ1cmwoI2IpIiBmaWxsPSIjRkJCQzA1IiBkPSJNMCAzN1YxMWwxNyAx%0D%0AM3oiLz48cGF0aCBjbGlwLXBhdGg9InVybCgjYikiIGZpbGw9IiNFQTQzMzUiIGQ9Ik0wIDExbDE3%0D%0AIDEzIDctNi4xTDQ4IDE0VjBIMHoiLz48cGF0aCBjbGlwLXBhdGg9InVybCgjYikiIGZpbGw9IiMz%0D%0ANEE4NTMiIGQ9Ik0wIDM3bDMwLTIzIDcuOSAxTDQ4IDB2NDhIMHoiLz48cGF0aCBjbGlwLXBhdGg9%0D%0AInVybCgjYikiIGZpbGw9IiM0Mjg1RjQiIGQ9Ik00OCA0OEwxNyAyNGwtNC0zIDM1LTEweiIvPjwv%0D%0Ac3ZnPg=='/>
    </a>

  </div>

</div>

Hope it helps. Cheers!

Answer 2

you can do with positioning absolute but i guess that's not what you seek. what you can do is

#auth{
    text-align: center;
    white-space: nowrap;
}
#auth:after {
    content: '';
    min-height: 100%;
    display: inline-block;
    vertical-align: middle;
}
#auth_google_link{
    white-space: normal;
    display: inline-block;
    vertical-align: middle;
}

Answer 3

you should remove the display:block (to allow it to be centered) from the auth_google_link and then add a padding-top to the auth_google_img about the 22% (to move it down to the middle) and it should work perfectly