CSS div Element immer mittig im Viewport

[CitroenDsVier]

Hallo zusammen,

ich suche eine Möglichkeit, ein div mit fester Höhe und Breite immer mittig im Viewport darzustellen. Es soll sich also nicht mittig auf der Seite (halbe Höhe), sondern mittig des im Bildschirm sichtbaren Bereiches befinden.
Ich habe bereits negative margins und top- bzw. left-Abstand relativ zum viewport (mit vw und vh) versucht, beides hat mir am Ende das Div immer relativ zur gesamten Seite mittig dargestellt.

<div id="popup"></div>

#popup {
   position: relative;
   width: 250px; height: 250px;
   ...
}

Wie sieht die richte Lösung dafür aus?

MfG, V40

 

[sdwaroc]

Versuchs mal mit

margin: auto

 

[CitroenDsVier]

hat leider nichts gebracht, jetzt ist das div in der Ecke unten links.

 

[sdwaroc]

Gib mal mehr html-Code bitte, so ist das etwas schwierig.

Jetzt verstehe ich! Sorry! Du willst sowas wie nen alert-Window, das über dem Rest der Seite in der Mitte steht? Wenn ja:

position: fixed

Und dann entsprechend positionieren.

 

[kling1]

kannst per flexbox probieren: https://jsfiddle.net/eoboucca/1/

 

[CitroenDsVier]

@sdwaroc: genau das ist das Ziel. Das popup-div befindet sich in einem die gesamte Seite überdeckenden Overlay.

super, "position: fixed;" wars! Danke

 

[Teisi]

Vorsicht, Chrome / Safari und Firefox Mobile behandeln "position: fixed" etwas anders.... :/
Vor allem wenn es verschachtelt ist...

 

[CitroenDsVier]

Ich teste hier parallel mit Firefox, Chrome, Edge und IE11. Soweit funktionierts in allen Browsern.

Die Mobile Version ist eh WIP, die bekommt das anders..