Настройка верхнего процента CSS не работает должным образом

Я попробовал отзывчивый макет css, но "top: 50%" не может работать, и "left: 50%" может. Почему это случилось?

<div style="position:relative;top:0%;left:0%;height:100%;width:100%">
    <div style="position:absolute;top:50%;left:50%;">
    </div>
</div>

Ответ 1

Определите размер для родительского контейнера, например div:

<div style="border: 2px solid red;position:relative;top:0%;left:0%;height:200px;width:300px">
    <div style="border: 2px solid green;position:absolute;top:50%;left:50%;height:50%;width:50%">
    </div>
</div>

Или

Другой способ - просто растянуть родительский контейнер, т.е. Div, по его верхним, нижним, левым и правым свойствам. Как это:

<div style="border: 2px solid red;position: absolute;top: 0px;bottom: 0px;left:0px;right:0px;">
    <div style="border: 2px solid green;position:absolute;top:50%;left:50%;height:50%;width:50%">
    </div>
</div>

Ответ 2

Рассмотрим ваш оригинальный HTML:

html, body {
  height: 100%;
}

<div style="position:relative;top:0%;left:0%;height:100%;width:100%">
  <div style="position:absolute;top:50%;left:50%;">test</div>
</div>

Ответ 3

См. Ссылку ниже. Я считаю, что у вас будет лучший результат с Fixed, за то, что вы пытаетесь сделать, хотя я все еще не уверен на 100%, я понимаю, что это такое.

http://jsfiddle.net/8q107wvb/1/

body {background:#e9e9e9; color:#202020;}
#wrapper {width:500px; background:#fff; margin:50% auto;}
.centered-content {position: fixed; top: 50%; left: 50%; background:#fff; padding:20px;}