CSS:在所有浏览器上，top百分比不起作用

Question

我想把一张图片放在一个div的中央位置。这个方法很好用，但是在安卓浏览器上，top属性没有任何效果。

很可能是因为我的div设置有误，导致图片无法确定其容器的高度（所以百分比也没有意义...）。

这里是jsfiddle。

HTML代码：

<div class="container">
   <img src="http://i.imgur.com/qRkEJni.jpg">
</div>

CSS：

.container {
    height:200px;
    width:200px;
    float:left;
    overflow: hidden;
}

.container img {
    height: auto;
    width:100%;
    top:50%;
    left:0;
    position: relative;
    -webkit-transform: translate(0,-50%);
    -moz-transform: translate(0,-50%);
    -ms-transform: translate(0,-50%);
    -o-transform: translate(0,-50%);
    transform: translate(0,-50%);
}

- Henrik Petterson

---

如果我一整天都在尝试解决这个问题却没有成功，那么当它符合条件时，我会用50点赏金来奖励它。 - Henrik Petterson

Answer 1

将父元素.container设置为relative，将子元素.container img设置为absolute

在Android 5.1.1上使用Firefox进行了测试。

摘自MDN

绝对定位

相对定位的元素仍被视为文档中元素的正常流。相比之下，绝对定位的元素从流中取出，因此在放置其他元素时不占用空间。绝对定位的元素相对于最近的定位祖先（非静态）定位。如果不存在定位祖先，则使用初始容器。

代码片段

.container {
  height: 200px;
  width: 200px;
  float: left;
  overflow: hidden;
  position:relative;
}
.container img {
  height: auto;
  width: 100%;
  top: 50%;
  left: 0;
  position:absolute;
  -webkit-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  transform: translate(0, -50%);
}

<div class="container">
  <img src="http://i.imgur.com/qRkEJni.jpg">
</div>

- dippas

Answer 2

你可以使用这个技巧。

.parentbox {
    width:500px;
    height:400px;
    border-style:solid;
    
    text-align: center;  /* align the inline(-block) elements horizontally */
    font: 0/0 a;         /* remove the gap between inline(-block) elements */
}

.parentbox:before {      /* create a full-height inline block pseudo-element */
    content: ' ';
    display: inline-block;
    vertical-align: middle; /* vertical alignment of the inline element */
    height: 100%;
}

.childbox {
    display: inline-block;
    vertical-align: middle;          /* vertical alignment of the inline element */
    font: 16px/1 Arial, sans-serif;  /* reset the font property */
    
    padding: 5px;
    border: 2px solid black;
}

<div class="parentbox">
    <div class="childbox">
        I shall be in the middle of parentbox regardless of its size!
    </div>
</div>

- solimanware