Question

我正在使用top: 50vh始终将图像定位在屏幕中央，而不管屏幕大小如何。现在我发现一些旧的webkit浏览器不支持这种类型的长度unix。什么是最好的解决方法？

这是我的设置：

.icon-preloader-xs {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  background: rgba(255, 255, 255, 0.5);
  background-image: url('../resources/img/icon-preloader-xs.gif');
  background-repeat: no-repeat;
  background-position: center 50hv;
}

Answer 1

我建议这种方法不基于hv单位。假设图像为100px×100px square。

您还可以使用百分比或其他相对值而不是像素。如果您使用Sass，或者只是使用Javascript动态设置边距，您可以随时计算。

position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;

演示：http://jsfiddle.net/4zy63m9k/2/

hv长度单位的解决方法

1 个答案: