Jak ustawić margines lub padding jako procent wysokości kontenera nadrzędnego?

Oto dwie opcje do naśladowania potrzebnego zachowania. Nie jest to ogólne rozwiązanie, ale może pomóc w niektórych przypadkach. Odstęp pionowy jest tutaj obliczany na podstawie rozmiaru elementu zewnętrznego, a nie jego rodzica, ale sam rozmiar może być względny do rodzica i w ten sposób odstęp będzie również względny.

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

Pierwsza opcja: Użyj pseudoelementów, tutaj odstępy pionowe i poziome są względem zewnętrznych. Demo

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

Przesunięcie odstępu poziomego do element zewnętrzny sprawia, że jest on względem rodzica zewnętrznego. Demo

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

Druga opcja: Użyj pozycjonowania bezwzględnego. Demo

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

Odpowiedź na nieco inne pytanie: możesz użyć jednostek vh do umieszczania elementów na środku viewport :

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

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

Aby element potomny był absolutnie umieszczony z elementu nadrzędnego, należy ustawić względną pozycję na elemencie nadrzędnym i bezwzględną pozycję na elemencie podrzędnym.

Wtedy na elemencie potomnym 'top' jest względem wysokości rodzica. Więc trzeba również "przetłumaczyć" w górę dziecka 50% własnego wzrostu.

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

Jest jeszcze jedno rozwiązanie z użyciem flex box.

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

Znajdziesz zalety/dezawantacje dla obu.

Inny sposób wyśrodkowania tekstu w jednej linijce to:

.parent{
  position: relative;
}

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

Lub po prostu

.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% wyściółka nie wyśrodkuje Twojego dziecka, umieści je poniżej środka. Myślę, że naprawdę chcesz wyściółkę-top 25%. Może po prostu kończy ci się miejsce, ponieważ Twoje treści stają się wyższe? Czy próbowałeś ustawić margin-top zamiast padding-top?

EDIT: Nevermind, the W3Schools site says

% określa wypełnienie w procentach szerokości elementu zawierającego

Więc może zawsze używa szerokości? Nigdy nie zauważyłem.

What you are można to zrobić za pomocą display:table (przynajmniej dla nowoczesnych przeglądarek). technika jest wyjaśniona tutaj .

To bardzo interesujący błąd. (Moim zdaniem i tak jest to błąd) Nice find!

Odnośnie Jak to ustawić, polecam odpowiedź Camilo Martina. Ale jeśli chodzi o dlaczego , chciałbym to trochę wyjaśnić, jeśli nie macie nic przeciwko.

W specyfikacji CSS znalazłem:

'padding'
procenty: odnoszą się do szerokości bloku

Więc, z rodzic width: 210px i dziecko padding-top: 50%, otrzymuję obliczoną / obliczoną wartość padding-top: 96.5px - która nie jest oczekiwaną 105px.

To dlatego, że w Windows (nie jestem pewien co do innych OSs) rozmiar zwykłych pasków przewijania jest domyślny 17px × 100% (lub {[5] } dla poziomych pasków). Te 17px są odejmowane przed obliczaniem 50%, stąd 50% of 193px = 96.5px.