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

revised codepen

Answer 2

div {
  /* for the demo */
  width: 100%;
  height: 300px;
  background-color: blue;
  
  /* makes the image gets centered */
  display: flex;
  justify-content: space-around; /* horizontal centering */
  align-items: center; /* vertical centering */
}

img {
  /* for the demo */
  height: 100px;
  background-color: white;
}

<div>
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Tux.svg/1200px-Tux.svg.png">
</div>

Answer 3

您可以使用以下内容在flexbox中垂直和水平居中放置图像：

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