我正在设计一个网站，我正在尝试按照本教程 https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_center-vertical 将元素垂直居中。
从技术上讲，内容确实居中。问题是：内容div高于内容本身，所以实际上它并没有完全居中，在移动屏幕上出现了问题。
不幸的是，不知道它是如何发生的或如何解决它。
网页部分：
<div class="banner-item-content">
<img src="https://alto.7180.eu/modules/custombanners/views/img/uploads/b09df371daff098e783367d788f96a20731083b9.PNG" alt="Banner1" class="banner-img">
<div class="custom-html"> <!--div to center-->
<h1 style="text-align: left;"><span style="color: #ffffff;">Prodotto 1</span></h1>
<p style="text-align: left;"><span style="color: #ffffff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</span></p>
<p style="text-align: left;"><span><a href="https://alto.7180.eu/it/34-donna" class="btn btn-default"><span>SHOP NOW</span></a></span></p> </div>
</div>
</div>
执行居中的 CSS：
.banner-item-content div.custom-html{
margin: 0;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
这是直接检查的网站链接：https://alto.7180.eu/it/。您可以在第一个横幅中看到问题，上面写着"Prodotto 1"(跳过滑块(。
我只是想了解哪种方法可以避免将此空白区域包含在中心div中，谢谢！
添加显示弹性到横幅项目内容，它将居中对齐。
.banner-item-content {
display: flex;
}