无法垂直居中图像，但水平工作

Question

我正在尝试为 Twitch TV 制作自定义关注者提醒。我正在尝试将 div 内的小图像居中。到目前为止，我已经设法将它水平居中，但无论我尝试什么，它都不会垂直居中。我不确定为什么，我已经尝试阅读有关 Whosebug 的许多其他问题，并遵循 W3schools but I think this is more of a specific problem to my code. Here is a fiddle 的指南。（你看不到图像，但你可以看到图像的位置）

这是代码；想法是图像在我命名为 'left-square-container' 的蓝色小方块内水平和垂直居中。但是目前图像仅在 div 的顶部水平居中。

如果有人能提供帮助，我将不胜感激。

@keyframes slideInFromAbove {
  0% {
    transform: translateY(-100%);
  }
  6% {
    transform: translateY(0);
  }
  98% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}

@keyframes slideInFromTheLeft {
  0% {
    opacity: 1;
    transform: translateX(-100%);
  }
  4.4% {
    opacity: 1;
    transform: translateX(0);
  }
  97% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-100%);
  }
}

@keyframes slideInFromBelow {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes slideInFromTheLeft-Text {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}

.follower-container {
  display: flex;
  font-family: 'Roboto';
  position: absolute;
  overflow: hidden;
  /*hide elements when they overflow*/
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.left-square-container {
  width: 100px;
  height: 100px;
  background: #0d47a1;
  position: relative;
  display: inline-block;
  float: left;
  z-index: 1;
  transform: translateX(-100%);
  animation: 9.6s 1 slideInFromAbove;
  /* timing (.4s duration + 8s hold + .4s removal of self + animation of right + removal of right) */
  -webkit-animation-fill-mode: forwards;
  /* Safari 4.0 - 8.0 */
  animation-fill-mode: forwards;
}

.icon img
/*THIS IS THE DIV TO CHANGE THE IMAGE ALIGNMENT*/

{
  display: block;
  margin: 0 auto;
  webkit-filter: drop-shadow(1px 1px 1px #212121);
  filter: drop-shadow(1px 1px 1px #212121);
}

.right-retangle-container {
  width: 400px;
  height: 100px;
  opacity: 0;
  background: #292929;
  border-top: 5px solid #0d47a1;
  box-sizing: border-box;
  display: inline-block;
  float: left;
  position: relative;
  /* needed for z-index*/
  z-index: 0;
  /*place under left square*/
  transform: translateX(-100%);
  animation: 8.8s .6s 1 slideInFromTheLeft;
  /* timing (.5 initial animation duration + 8s hold + .3s removal of self) additional .6s of delay for animation of left square*/
  -webkit-animation-fill-mode: forwards;
  /* Safari 4.0 - 8.0 */
  animation-fill-mode: forwards;
}

.text {
  font-size: 30px;
  color: #ffffff;
  overflow: hidden;
  text-align: center;
  /*vertical alignment of text*/
  position: relative;
  /*horizontal alignment of text*/
  top: 50%;
  /*horizontal alignment of text*/
  transform: translateY(-50%);
  /*horizontal alignment of text*/
}

.text-animation {
  transform: translateY(100%);
  animation: .5s 1s 1 slideInFromBelow;
  -webkit-animation-fill-mode: forwards;
  /* Safari 4.0 - 8.0 */
  animation-fill-mode: forwards;
  margin-left: 20px;
  margin-right: 20px;
}

.keyword:not(.user_message) {
  color: #f57f17;
}

<div class="follower-container">
  <div class="left-square-container">
    <div class="icon">
      <img class="image" src="{image}" />
    </div>
  </div>

  <div class="right-retangle-container">
    <div class="text">
      <div class="text-animation">
        New Follower <span class='keyword name'>{name}</span></div>
    </div>
  </div>
</div>

Answer 1

如果您知道容器的height，您可以将所述容器的line-height设置为其height的值。

我将您的 CSS 更新为如下所示：

.icon {
  text-align: center;
  heignt: 100px;
  line-height: 100px;
}

Answer 2

"icon" div 没有任何指定的高度。它被声明为块。因此，您不能期望在此 div 内垂直对齐图像，因为 div 在屏幕上的高度范围将仅与图像大小有关。即使在 "icon" 的 css 中，您已经说过 margin:0 auto; -> 该命令将使图像居中对齐，而不是垂直居中，而只是水平居中。对于你想要发生的事情，0 应该是自动的，然后 div 应该有一些高度，以看到它也垂直居中对齐。

Answer 3

有几种方法可以做到这一点，但由于您已经在使用 flexbox，我建议继续使用该路径。

在您的 .left-square-container div 上，只需将显示更改为 display:flex，然后设置 align-items: center; 和 justify-content: center;。

似乎对我有用。 Fiddle

无法垂直居中图像，但水平工作

Can't vertically centre image, but horizontal works

css

image

vertical-alignment

flexbox