不能垂直居中图像，但水平有效

Question

我正在尝试为Twitch TV制作自定义关注者警报。我试图在div内居中一个小图像。到目前为止，我已经设法将其水平居中，但无论我尝试什么，它都不会垂直居中。我不知道为什么，我已经尝试阅读许多其他关于stackoverflow的问题，以及遵循W3schools的指南，但我认为这对我的代码来说更像是一个具体的问题。这是一个小提琴。(你看不到图像，但可以看到图像的位置)

这是代码;其想法是图像在蓝色小方块内水平和垂直居中，我将其命名为"左方块容器"。但是，目前图像仅在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

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

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

似乎对我有用。 小提琴

Answer 2

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

我更新了您的 CSS 如下所示：

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

Answer 3

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