Question

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

padding-top: 50%;

现在，无论分辨率如何，我都尝试在该div内居中（相等的顶部和底部，左侧和右侧）图像。我可以通过以下方式实现这一点：

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

现在，除了图像在浏览器调整大小时不会垂直居中之外，其他所有功能都可以使用。它会上下移动。

如何在align vertically的{{1}}上实现它？我怀疑我必须删除middle，但随后我对如何居中居留了看法。

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

Answer 1

请尝试以下操作：

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

Answer 2

请尝试以下操作：

 .logo{
    position: absolute;
    top:0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    max-width: 100px;
}

Answer 3

将top:50px更改为top:50%并删除margin: 0 auto;

.background {
  width: 100%;
  overflow: hidden;
  background-color: #FFFFFF;
  margin-bottom: 0px;
  background-position-x: 50%;
  background-position-y: 50%;
  background-repeat-x: no-repeat;
  background-repeat-y: no-repeat;
  background-attachment: local;
  background-size: cover;
  display: block;
  position: relative;
  background-color: #f4f4f4;
  padding-top: 50%;
  text-align: center;
  border: 5px solid #c4c4c4;
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/City_of_London_skyline_from_London_City_Hall_-_Sept_2015_-_Crop_Aligned.jpg/1200px-City_of_London_skyline_from_London_City_Hall_-_Sept_2015_-_Crop_Aligned.jpg);
}

.logo {
  left: 50%;
  display: inline-block;
  transform: translate(-50%, 0);
  position: absolute;
  z-index: 1;
  top: 50%;
  max-width: 100px;
}

<div class="background">
  <img class="logo" src="https://seeklogo.com/images/U/underground-london-logo-0B52F46982-seeklogo.com.png">
</div>

将图片内的div与宽高比背景图片居中

3 个答案: