html - 如何使用Flex居中图像？

This question already has answers here:

Flexbox: center horizontally and vertically
                                
                                    （11个答案）
                                
                        
                        
                            In CSS Flexbox, why are there no “justify-items” and “justify-self” properties?
                                
                                    （4个答案）
                                
                        
                        
                            CSS center text (horizontally and vertically) inside a div block
                                
                                    （23个答案）
                                
                        
                        
                            How to vertically align an image inside a div
                                
                                    （35个答案）
                                
                        
                                7个月前关闭。
            
                    
我已经使用Flex在页面中居中放置了div，现在我想在div中居中放置图像。

我觉得我在原来的居中位置上已经习惯了许多属性，并且不知道自己是否正确执行了操作。

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;
}

最佳答案

您可以将#auth放在flexbox内并居中。

#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>

希望能帮助到你。干杯!

关于html - 如何使用Flex居中图像？ ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56720338/