Html 在flexbox中垂直和水平居中图像

我想要达到的目标：

将图像水平和垂直居中放置在右侧flexbox项目中，如图所示：

最好的方法是什么

这是我的密码笔：

我使用这个

.grid right

类将图像水平居中，而不是垂直居中：

.grid-right {
    width: 67%;
    height: 100vh;
    background-size: cover;
    text-align: center;
} 

div{
/*为了演示*/
宽度：100%；
高度：300px；
背景颜色：蓝色；
/*使图像居中*/
显示器：flex；
对齐内容：周围空格；/*水平居中*/
对齐项目：居中；/*垂直居中*/
}
img{
/*为了演示*/
高度：100px；
背景色：白色；
}

div{
/*为了演示*/
宽度：100%；
高度：300px；
背景颜色：蓝色；
/*使图像居中*/
显示器：flex；
对齐内容：周围空格；/*水平居中*/
对齐项目：居中；/*垂直居中*/
}
img{
/*为了演示*/
高度：100px；
背景色：白色；
}

---

您可以使用以下方法在flexbox中垂直和水平居中图像：

.grid-right {
    width: 67%;
    height: 100vh;
    background-size: cover;
    text-align: center;
    display: flex;            /* new */
    align-items: center;      /* new */
    justify-content: center;  /* new */
}

---

您可以使用以下方法在flexbox中垂直和水平居中图像：

.grid-right {
    width: 67%;
    height: 100vh;
    background-size: cover;
    text-align: center;
    display: flex;            /* new */
    align-items: center;      /* new */
    justify-content: center;  /* new */
}

---

你知道图像的高度吗？你知道图像的高度吗？