CSS div vertikal im Fenster zentrieren

[Mr. Snoot]

Hi,

ich habe ein div, was bei Klick eingeblendet wird. Ist es allein mit CSS (ohne JS) möglich, das div vertikal im Fenster (nicht vertikal auf der Seite) zu zentrieren?

Es muss nicht unbedingt mitscrollen, aber beim Öffnen sollte es sich in der Mitte des Fensters befinden.

 

[HaGGi.13]

Hmmm..., ich würde es so machen, dass dein Fenster ein Wrapper-div hat, also ein Div was immer genau so groß ist wie dein Fenster ist, das sollte dein div normalerweise von allein machen, wenn du nichts weiter an größen dazu definierst.
Und in diesem Div kommt jetzt das Div, welches du vertikal ausrichten willst und das geht mit dann mit:

margin-left: auto;
margin-right: auto;

Musst du mal gucken, aber so sollte es gehen, hab es leider nicht genau im Kopf.

 

[Mr. Snoot]

Das wäre doch für eine horizontale Zentrierung!?

 

[Adagio]

http://lmgtfy.com/?q=css+div+vertical

 

[HaGGi.13]

... na dann halt margin-top und margin-bottom und es ist je egal ob man 50% oder auto an der stelle nimmt.

War mein Fehler...

 

[xkynet]

... na dann halt margin-top und margin-bottom

Das geht nicht (zumindest im standard-mode) vertikale Zentrierung von Divs geht bis dato nicht so ohne weiteres. vor allem dann nicht, wenn das div eine variable Höhe besitz. Sollte dies nicht der Fall sein, kannst du das div absolut setzen und dann top:50% und margin-bottom:-"deine Höhe"/2 andernfalls gibt es immernoch die Möglichkeit mit display:table-cell, wobei diese möglichkeit ehr mit vorsicht zu geniesen ist.

 

[claW.]

ich würd einfach mal javascript in den raum werfen. ist zwar nicht elegant und läuft nicht überall, aber wenn du sichergehen kannst, dass javascript benötigt wird (sei es durch ajax oder sonstwas), kannst du es ja auch darüber versuchen (wodurch es auf jeden fall funktioniert). clientWidth und clientHeight sollten hierbei die relevanten funktionen sein.

 

[Adagio]

Schaut einfach mal einfach die Links an, die Google da oben ausspuckt. Da gibt es mehr als ein Beispiel (ohne JS), wie man das über CSS realisieren kann.

 

[Mr. Snoot]

Dann zeig mir bitte eine Seite, die das ganze vertikal im Fenster und nicht vertikal auf der Seite zentriert*

Im Moment hab ich's so gemacht, dass sich das div paar Pixel oberhalb des angeklickten Links öffnet; aber wenn der Link weit unten am Bildschirm ist, dann ist eben auch das div sehr weit unten und man muss runterscrollen.

Auch dieses "top:50% ..." bezieht sich immer auf die Seite, nicht auf das Fenster.

Das div ist übrigens absolut gesetzt und hat eine feste Größe.



* vertikal auf der Seite = bei einer 2000 Pixel hohen Seite öffnet sich das div immer bei 1000 Pixel Höhe
vertikal im Fenster = das div öffnet sich zentriert im aktuell sichtbaren Fenster


Ich glaube langsam, dass es ohne JS nicht geht.

 

[Adagio]

Ich hab kein Wort verstanden, was jetzt nicht klappt, bzw. was du vor hast. Was bitte ist ein Fenster für dich und was eine Seite?

Man kann beides - ein Element in einem DIV vertikal zentrieren oder das Element im Bezug auf das Browserfenster zentrieren. Wo liegt jetzt dein konkretes Problem? Wie sehen deine Versuche aus? Wo ist ein Link, bei dem wir mal sehen können, woran es hapert?

Ein wenig mehr Mitarbeit, bitte

 

[Mr. Snoot]

Na, ich hab hier meine divs (auf das -Symbol bei den PDFs klicken).

Und die sollten bezogen auf das Fenster zentriert sein. Egal wo sich der angeklickte Link befindet bzw. wo der Besucher gerade auf der Seite scrollt. Der Code dafür sieht im Moment so aus:

.white_content
{
  display: none;
  position: absolute;
  margin-top:-40px; /* 40 Pixel über dem jew. Link */
  left: -90px;
  width: 790px;
  height: 375px;
  padding: 5px;
  border: 1px solid #000;
  background-color:#F5F5F5;
  z-index:1002;
  overflow: auto;
  text-align:center;
}

Aber alle Versuche das mit top hinzubekommen waren immer bezogen auf die Seite.

 

[Adagio]

Du hast das Prinzip nicht verstanden

Du musst top: 50%; und left: 50% setzen - somit ist die obere, linke Ecke erstmal immer exakt in der Mitte des Bildschirms.

Dann musst du über margin das Element um jeweils die Hälfte von dessen Größe zurück schieben - in deinem Fall margin-top: -187px und margin-left: 395px;

So wird es eher was ...

 

[Mr. Snoot]

Und schwupps landet das div genau mittig auf der Seite; sichtbar war aber das obere Drittel der Seite, und in diesem oberen Drittel sollte es auch erscheinen.

 

[Adagio]

Das liegt daran, dass du dem #inhalt ein position:relative; gegeben hast - in dem Fall richtet sich dein Div nach der Größe des Inhaltes und nicht mehr nach dem Fenster.

 

[Mr. Snoot]

Aja, in der Tat; dann muss ich später mal schauen, ob ich das gefahrlos ändern kann.

Merci.

 

[xkynet]

also wenn du eh schon Javascript zum öffenen des Fensters benutzt, kannst du auch gleich das Teil mittels Javascript ausrichten.

DEINOBJEKT.style.top = (window.innerHeight - 375)/2;
DEINOBJEKT.style.position = 'fixed';

Bei der Syntax bin ich mir nicht so ganz sicher, ich benutze eigentlich nur Frameworks.

 

[Mr. Snoot]

Okay, hat doch nicht geklappt; jetzt öffnet sich das div immer im oberen Drittel der Seite, auch wenn man sich ganz unten befindet. Vermutlich weil da noch andere div Positionen mit reinspielen; aber da kann ich nicht viel ändern weil es dann an anderen Stellen hakt - und da hab ich im Moment keine Lust was zu ändern.

Das mit JS funktioniert leider auch nicht, weil der IE innerHeight nicht kennt; und größere Scripte will ich eigentlich nicht benutzen.

Ich denke, ich lass das jetzt erstmal wie bisher; ist zwar nicht optimal aber ganz ok.