CSS: верхний процент не работает на всех браузерах

Я стремлюсь расположить изображение посередине внутри div. Он отлично работает, но по какой-то причине top не оказывает никакого влияния на браузер Android.

Очень вероятно, что у меня неправильно установлены дивы, где img не может определить высоту контейнера (поэтому процент не имеет смысла...).

Вот 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%);
}
2 2
css css3 android-browser

2 ответа:

Сделайте своего родителя .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>
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>
1