css - hv 长度单位的解决方法

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单位的方法。假定图像为 100 像素乘 100 像素的正方形。

您也可以使用百分比或其他相对值代替像素。如果您使用 Sass，或者只使用 Javascript 动态设置边距，您总是可以计算这个值。

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

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