css - 使用宽高比背景图像在 div 内居中图像

Question

我有一个带有背景图像的 div，无论屏幕分辨率如何，它都应该具有相同的纵横比。我将其设置为：

padding-top: 50%;

现在，在该 div 内，我试图将图像居中（上下左右相等），无论分辨率如何。我通过以下方式实现了这一目标：

left: 50%;
display: inline-block;
transform: translate(-50%,0);
position: absolute;
z-index: 1;
top:50px;

现在，一切正常，除了图像在浏览器调整大小时没有垂直居中。它上下移动。

我如何实现它align vertically呢middle？我怀疑我必须删除它，top:50px但后来我被困在如何将它居中..

这是一个小提琴：https ://jsfiddle.net/fjLo7egd/1/

标签： css

Answer 1

请试试这个：

.logo{
    left: 50%;
    display: inline-block;
    transform: translate(-50%,-50%);
    position: absolute;
    z-index: 1;
    top:50%;
    max-width:100px;
}