Wie kann ich den CSS-Rand oder -Abstand als Prozentsatz der Höhe des übergeordneten Containers festlegen?

Rand oder Innenabstand als Prozentsatz der Höhe des übergeordneten Containers in CSS festlegen

Beim vertikalen Ausrichten von Elementen mithilfe von CSS ist es häufig wünschenswert, dies festzulegen der Abstand oder Rand als Prozentsatz der Höhe des übergeordneten Containers. Wenn Sie jedoch beispielsweise „padding-top“ mithilfe eines Prozentwerts festlegen, wird dieser Prozentsatz basierend auf der Breite des Containers berechnet, sodass die vertikale Ausrichtung einrastet, wenn sich die Breite des Containers ändert.

Um diese Einschränkung zu überwinden und Elemente vertikal auszurichten Wenn Sie einen Prozentsatz der Höhe des übergeordneten Containers angeben möchten, sollten Sie den folgenden Ansatz in Betracht ziehen:

Anstatt den Abstand oder den Rand direkt am untergeordneten Element festzulegen, erstellen Sie eine verschachtelte Struktur mit einem zusätzlichen inneren Element div:

<div>
<p>Stilisieren Sie das innere div mithilfe von „oben“ oder „unten“ für vertikale Auffüllung oder Ränder und legen Sie seine Position auf „relativ“ oder „absolut“ fest, um eine präzise Platzierung zu ermöglichen:</p>
<pre class="brush:php;toolbar:false">.inner-container {
  top: 50%; /* Vertical padding or margin equal to 50% of parent container height */
  position: relative;
}

Mithilfe von In den Eigenschaften „oben“ oder „unten“ können Sie den vertikalen Abstand oder den Rand als Prozentsatz der Höhe des Containers festlegen, um sicherzustellen, dass die Ausrichtung unabhängig von der Breite des Containers konsistent bleibt.