Как настроить поля и отступы в процентах от высоты родительского контейнера?

вот два варианта эмуляции необходимого поведения. Не общее решение, но может помочь в некоторых случаях. Вертикальное расстояние здесь вычисляется на основе размера внешнего элемента, а не его родителя, но сам этот размер может быть относительно родителя, и таким образом расстояние будет относительным.

<div id="outer">
    <div id="inner">
        content
    </div>
</div>

первый вариант: используйте псевдо-элементы, здесь вертикальное и горизонтальное расстояние относительно внешнего. демо

#outer::before, #outer::after {
    display: block;
    content: "";
    height: 10%;
}
#inner {
    height: 80%;
    margin-left: 10%;
    margin-right: 10%;
}

переезд горизонтальное расстояние до внешнего элемента делает его относительно родителя внешнего элемента. демо

#outer {
    padding-left: 10%;
    padding-right: 10%;
}

второй вариант: используйте абсолютное позиционирование. демо

#outer {
    position: relative;
}
#inner {
    position: absolute;
    left: 10%;
    right: 10%;
    top: 10%;
    bottom: 10%;
}

ответ на несколько иной вопрос: Вы можете использовать vh единицы для размещения элементов в центре просмотра:

.centerme {
    margin-top: 50vh;
    background: red;
}

<div class="centerme">middle</div>

чтобы дочерний элемент располагался абсолютно от своего родительского элемента, вам нужно установить относительное положение на родительском элементе и абсолютное положение на дочернем элементе.

тогда на дочернем элементе ' top ' относительно высоты родителя. Поэтому вам также нужно "перевести" ребенка вверх на 50% от его собственного роста.

.base{
    background-color: green;
    width: 200px;
    height: 200px;
    overflow: auto;
    position: relative;
}
    
.vert-align {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}

    <div class="base">
        <div class="vert-align">
            Content Here
        </div>
    </div>

есть еще одно решение с использованием flex коробка.

.base{
    background-color:green;
    width: 200px;
    height: 200px;
    overflow: auto;
    display: flex;
    align-items: center;
}

<div class="base">
    <div class="vert-align">
        Content Here
    </div>
</div>

вы найдете преимущества/недостатки для обеих сторон.

другой способ центрировать текст одной строки:

.parent{
  position: relative;
}

.child{
   position: absolute;
   top: 50%;
   line-height: 0;
}

или просто

.parent{
  overflow: hidden; /* if this ins't here the parent will adopt the 50% margin of the child */
}

.child{
   margin-top: 50%;
   line-height: 0;
}

50% обивка не будет центрировать вашего ребенка, он разместит его ниже центра. Я думаю, что вы действительно хотите обивка-топ 25%. Может быть, вы просто бежите из космоса, как ваш контент становится выше? Также вы пробовали установить margin-top вместо padding-top?

EDIT: Nevermind, сайт w3schools говорит

% задает отступ в процентах от ширины содержащего элемент

Так, может быть, он всегда использует ширину? Я никогда не отмеченный.

то, что вы делаете, может быть достигнуто с помощью display:table (по крайней мере, для современных браузеров). техника объяснена здесь.

это очень интересная ошибка. (На мой взгляд, это ошибка в любом случае) хорошая находка!

о как чтобы установить его, я бы рекомендовал ответ Камило Мартина. Но что касается почему, Я хотел бы объяснить это немного, если вы не против.

---

на спецификации CSS я нашел:

'padding'
процентов: см. ширину содержащего блок

... что странно, но ладно.

Итак, с родителем width: 210px и ребенка padding-top: 50%, Я получаю вычисленное / вычисленное значение padding-top: 96.5px - что не является ожидаемым 105px.

это потому, что в Windows (я не уверен в других ОС) размер общих полос прокрутки по умолчанию 17px × 100% (или 100% × 17px для горизонтальных полос). Эти 17px вычитается до расчета 50%, следовательно,50% of 193px = 96.5px.