Vertikale Ausrichtung nicht auf der ersten Seite zu laden, funktioniert

Question

ich vertikal ein div mit

.element { 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
} 

jedoch Mitte versucht, habe ich bemerkt, dass auf der ersten Seite zu laden, ist es nicht gut funktioniert. Das Div bewegt sich zum Anfang der Seite. Bei der Aktualisierung funktioniert alles ordnungsgemäß und das Div ist vertikal zentriert. Was kann ich tun, um das zu lösen?

Answer 1

Um vertikal Mitte Inhalt div können Sie verwenden flex https://css-tricks.com/snippets/css/a-guide-to-flexbox/#article-header-id-7

display: flex; 
align-items: center; 

Answer 2

Ich neige dazu, absolutely Positionselemente durch 50% und verwenden Sie dann margin-top:-<half .element height>:

Beispiel:

height:100px; 
position: absolute; 
top:50%; 
margin-top:-50px; 

Check out this fiddle