Показать div в центре по горизонтали и вертикали на мобильном устройстве с использованием только CSS

Question

Задача состоит в том, чтобы отображать блок в центре по горизонтали и вертикали внутри другого блока. Я использую this code

<div class="parent"> 
    <div class="child"></div> 
</div> 

.parent { 
    background-color: #AFAFAF; 
    bottom: 0; 
    left: 0; 
    position: absolute; 
    right: 0; 
    top: 0; 
    width: 100%; 
} 

.child { 
    background-color: #FF0000; 
    bottom: 0; 
    height: 200px; 
    left: 0; 
    margin: auto; 
    position: fixed; 
    right: 0; 
    top: 0; 
    width: 200px; 
} 

и он прекрасно работает на браузерах и IOS устройств, но это происходит в мобильных устройствах Android (не таблетки): внутренний DIV получает прижат к верхней левой , но когда я проверяю элемент с помощью Adobe Edge Inspect, я вижу, что выделенная область для этого внутреннего div отображается правильно. Как я могу исправить эту проблему, сосредоточившись на мобильном телефоне Android? Размер внутреннего блока изменится, поэтому desigion должен быть универсальным.

Answer 1

Самый простой способ с вашей разметкой - {left:50%;margin-left:-100px;}.

Тогда то же с высотой. {top:50%;margin-top:-100px;}

В итоге:

.child { 
    background-color: #FF0000; 
    height: 200px; 
    left: 50%; 
    position: fixed; 
    top: 50%; 
    width: 200px; 
    margin: -100px 0 0 -100px; 
} 

Answer 2

Я использовал для выравнивания Div по горизонтали и verticaly путь вы делаете, но это кажется, что этот метод не является действительно кросс-браузер. Вместо этого я взглянул на то, как делал Facebook.

The demo on JsFiddle

HTML-:

<table> 
    <tr> 
     <td><div class="square">Some text</div></td> 
    </tr> 
</table> 

CSS-:

html, body { 
    height: 100%; 
    width: 100%; 
} 

table { 
    margin: 0px auto; 
    height: 100%; 
} 

.square { 
    width: 150px; 
    height: 150px; 
    background-color: red; 
} 

ПРИМЕЧАНИЕ: Я недавно посмотрел, и кажется, что Facebook изменил способ, которым они делают это. Они по-прежнему используют свойства отображения таблицы, но не более тег table, tr и td (вместо этого div).