Как сделать макет вертикально отзывчивым

Question

Я создаю страницу сайта, которая реагирует как на мобильные, так и на настольные версии.

Теперь проблема, она показывает правильное расположение в рабочем столе, а также на веб-сайтах, как http://mobiletest.me/

Но, когда я на самом деле открыть его в мобильном телефоне (специально iPhone и интернет-исследователь в Nokia Lumia), она показывает странную вид ! Никакого стиля, ничего нет.

ЧТО Я ХОЧУ ДОСТИГНУТЬ?

Я просто хочу, чтобы стол был вертикально и горизонтально выровнен по центру. Независимо от того, что он будет открыт в любой мобильной или настольной версии. Нужна помощь!

Here is jsFiddle link 

https://jsfiddle.net/milindtheachiever/4hsd85kf/ 

Answer 1

Чтобы выровнять что-то в центре экрана, независимо от использования размера экрана это:

position: fixed; 
top: 50%; 
left: 50%; 
transform: translate(-50%, -50%);