Positionierung eines Divs relativ zu seiner vertikalen Mitte

Question

Ich habe eine Willkommensnachricht, die benötigt, dass ihre Mitte bei 25% vom oberen Rand des Fensters positioniert wird. Da es beliebig viele Zeilen lang sein kann, muss es mit seiner vertikalen Mitte positioniert werden. Hier ist, was ich gerade habe.

.welcomeMessage { 
    position: absolute; 
    text-align: center; 
    vertical-align: middle; 
    display: inline-block; 
    margin: auto; 
    width: 60%; 
    top: 25%; 
} 

habe ich versucht, unter Verwendung von Anzeige: Inline-Block und Anzeige: flex mit vertical-align: mittlere aber weder die Position div relativ zu seiner vertikalen Mittel. Jede Hilfe würde sehr geschätzt werden!

gewünschte Positionierung: Aktuelle Positionierung:

Answer 1

Im Snippet unten ich zwei Elemente, beide auf position:absolute mit top: 25% und left: 50%.

• .element als transform: translate(-50%, -50%);, die ihn zu zentrieren, vertikal und horizontal „genau“ bei 25% der Seitenabmessungen (Höhe, Breite) ermöglicht. Im Gegensatz zu top und left basiert die transform-Eigenschaft auf der Größe des Zielelements. Der Prozentsatz, den Sie festlegen, bezieht sich auf die Größe der Begrenzungsbox des Ziels.
• .other in der anderen Hand keine transform Regel hat so ist es nicht positioniert, wie Sie es sein, seine obere Grenze sitzt wollte bei 25%

.element, 
 
.other { 
 
    position: absolute; 
 
    text-align: center; 
 
    top: 25%; 
 
    left: 50%; 
 
} 
 

 
.element { 
 
    transform: translate(-50%, -50%); 
 
    color: green; 
 
} 
 

 
.other { 
 
    color: red; 
 
} 
 
html,body{ 
 
    height:100%; 
 
    margin:0; 
 
    padding:0; 
 
}

<div class="element">I'm at 25% middle</div> 
 
<div class="other">I'm not at 25% middle</div>

Answer 2

Verwenden transform:translate(-50%);

margin: auto; nicht mit inline-block Elementen arbeiten, so dass Sie left:50% hinzufügen müssen sie horizontal Zentrum zu machen.

html,body{ 
 
    height:100%; 
 
    margin:0; 
 
    padding:0; 
 
} 
 

 
.welcomeMessage { 
 
    position: absolute; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    display: inline-block; 
 
    left:50%; 
 
    width: 60%; 
 
    top: 25%; 
 
    transform:translate(-50%); 
 
}

<div class="welcomeMessage">Welcome Message</div>

Answer 3

Dies ist wahrscheinlich funktionieren sollte. Ich habe die Größe für h1 als 2em definiert und berechne die obere Position, 25% mit der halben Schriftgröße abnehmend.

.container { 
 
    width: 100vw; 
 
    height: 100vh; 
 
    background: lightgray; 
 
} 
 

 
.h1 { 
 
    font-size: 2em; 
 
} 
 

 
.welcomeMessage { 
 
    position: absolute; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    display: inline-block; 
 
    margin: auto; 
 
    width: 60%; 
 
    top: calc(25% - 1em) 
 
}

<div class="container"></div> 
 
<h1 class="welcomeMessage">Welcome</h1>