Html 如何使用Flex将图像居中？

我已经使用Flex在页面中居中放置了div，现在我想在div中居中放置图像

我感觉我在使用我原来的定心中的许多属性，不知道我是否做得正确

---

你可以做绝对定位，但我想这不是你想要的。 你能做的就是

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

您可以将auth放入flexbox并将其居中

授权顶部{ 显示器：flex； 弯曲方向：立柱； 对齐项目：居中； 证明内容：中心； 文本对齐：居中； 高度：100vh； } 认证{ 宽度：250px； 高度：185px； 背景：RGBA255255200,0.5； 盒影：0px 1px 3px rgba25,25,25,0.4； display:flex；/*从此处添加了样式*/ 证明内容：中心； 对齐项目：居中； } 验证谷歌链接{ 宽度：64px； 高度：64px； 显示：块； } 授权谷歌{ 宽度：64px； 边框：1px纯白； 边界半径：2px； } auth_google_img:悬停{ 边框：1px纯黑； }

---

您应该删除display:block以允许它从auth_google_链接居中，然后在auth_google_img上添加一个大约22%的填充顶部，以将其向下移动到中间，这样应该可以完美地工作

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