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

Question

我想要达到的目标：

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

最好的方法是什么？

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

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

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

标签： htmlcssflexbox

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

修改后的代码笔