Div-Position in Bezug auf den Container und das Fenster

Question

Ich kann es nicht schaffen, ein Div zu stylen, so dass es horizontal in der Mitte (Breite) seines Containers und vertikal in der Mitte der Fensterhöhe positioniert ist.

Answer 1

Meinst du sowas?

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

 
div { padding: 1em; box-sizing: border-box; } 
 

 
.parent { 
 
    width: 50%; 
 
    background: lightblue; 
 
    border:1px solid blue; 
 
} 
 

 
.child { 
 
    width: 50%; 
 
    background: lightpink; 
 
    border:1px solid red; 
 
    margin: 0 auto; 
 
    top: 50vh; 
 
    position: relative; 
 
    transform: translateY(-100%); 
 
}

<div class="parent"> 
 
    <div class="child">middle</div> 
 
</div>

jsFiddle: https://jsfiddle.net/azizn/pxsL7usy/

Logic:

ein div horizontal innerhalb seiner Eltern/Behälterzentrierung ist ziemlich einfach, definieren wir nur ein width und margin: 0 auto hinzuzufügen.

Um ein Element in der Mitte des Ansichtsfensters vertikal zu machen, können Sie die CSS-Ansichtsfenstereinheiten verwenden, in diesem Fall vh, die Höhe des Ansichtsfensters. Sie wenden einen nicht statischen position (wie relative, absolute oder fixed) und einen top Wert von 50vh an, um das div auf die Hälfte des Darstellungsbereichs zu versetzen. Fügen Sie dann hinzu, um die Höhe des Elements vom oberen Offset zu verringern.

Answer 2

Dies ist eigentlich nicht möglich in reinem CSS, zumindest nicht, wenn Sie anständige Cross-Browser-Unterstützung wollen. Sie können horizontal mit CSS zentrieren, aber vertikal benötigt etwas Javascript.