Question

.center {
  position: absolute;
  left: 50%;
  top: 50%;

  /*
  Nope =(
  margin-left: -25%;
  margin-top: -25%;
  */

  /* 
  Yep!
  */
  transform: translate(-50%, -50%);

  /*
  Not even necessary really. 
  e.g. Height could be left out!
  */
  width: 40%;
  height: 50%;
}

这在网络浏览器中运行良好。然而，在移动设备上似乎并不支持。什么是一个有效的简单解决方案？

我的HTML：

<div id="responsive-with-backgroundimg">
<img src="" class="center">
</div>

Answer 1

你need the -webkit- prefix。

.center {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 40%;
  height: 50%;
}

Answer 2

在不同的浏览器中，您必须使用前缀css 这应该是这样的：

-webkit-transform: translate(-50%, -50%);  /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: translate(-50%, -50%);  /* IE 9 */
        transform: translate(-50%, -50%);  /* Firefox 16+, IE 10+, Opera */

Answer 3

尝试：

.center {
  position: absolute;
  left: 0;
  right:0;
  top: 0;
  bottom:0;
  margin: auto;
  width: 40%;
  height: 50%;
}

你也可以考虑使用flex

Answer 4

目前这是我最喜欢的图像居中方式：

img.center {
 position: absolute;
 left: -9999px;
 top: -9999px;
 right: -9999px;
 bottom: -9999px;
 margin: auto;
}

垂直和水平居中图像，在iPhone上翻译

4 个答案: