CSS div Element immer mittig im Viewport

CitroenDsVier · 26. August 2016

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.

HTML:

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

Code:

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

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

MfG, V40

sdwaroc · 26. August 2016

Versuchs mal mit

Code:

margin: auto

CitroenDsVier · 26. August 2016

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

sdwaroc · 26. August 2016

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:

Code:

position: fixed

Und dann entsprechend positionieren.

kling1 · 26. August 2016

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

CitroenDsVier · 26. August 2016

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

super, "position: fixed;" wars! Danke

Teisi · 26. August 2016

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

CitroenDsVier · 26. August 2016

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..

Suche

CSS div Element immer mittig im Viewport

CitroenDsVier

Lt. Commander

sdwaroc

Captain

CitroenDsVier

Lt. Commander

sdwaroc

Captain

kling1

Gast

CitroenDsVier

Lt. Commander

Teisi

Lt. Junior Grade

CitroenDsVier

Lt. Commander

Ähnliche Themen