Процент, связанный с родительской высотой css [duplicate]

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

Тогда в дочернем элементе «верх» находится относительно высоты родителя. Таким образом, вам также нужно «перевести» вверх ребенка на 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>

Существует другое решение используя гибкую коробку.

.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%. Может быть, у вас просто не хватает места, поскольку ваш контент становится выше?

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

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

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

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

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

<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>

Это очень интересная ошибка. (По-моему, это все равно ошибка) Ницца найти!

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

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

'padding' Процент: относится к ширине содержащего блока

... что странно, но все в порядке.

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

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