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

Question

我想要达到的目标：

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

最好的方法是什么？

这是我的 Codepen：https ://codepen.io/AlexZeitler/pen/JayvNg

我使用这个.grid-right类使图像水平居中但不是垂直居中：

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

Answer 1

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

修订代码笔