CSS, div-Box auf Bildschirm zentrieren?

Hallo,

ich habe Win 7 x64 auf meinem Laptop.
Bei der Bearbeitung einer Homepage bin ich auf ein Problem gestoßen, zu dem ich keine Lösung finde:
in der index.php-Datei habe ich eine div-Box formuliert:


body
div id=„hptfnstr“

(ich habe mal die <> weggelassen, weil sonst trotz pre der Code nicht gezeigt wird).
In der zugehörenden CSS-Datei ist „hptfnstr“ wie folgt formatiert:

div#hptfnstr {
position: relative;
margin: 25px auto 50px auto;
width: 1100px;
height: 658px;
border: 0px solid black;
background-image: url(../nhp1/grf/hintergrund1.jpg);
}

Im Prinzip funktioniert das, aber ich finde keinen Weg, auch die vertikale Position der Box stets mittig auf dem Schirm zu haben. So, wie das oben steht, sorgt „auto“ dafür, daß unanhängig von der Breite des Bildschirms die Box in der Waagerechten stets mittag zentriert ist. Bei den Werten 25px und 50px ist auf m e i n e m Bildschirm die Box auch in der Senkrechten mittig angeordnet, nicht aber auf einem Bildschirm mit deutlich höherer Auflösung. Dort sitzt die Box 10mm unter dem oberen Bildschirmrand und hat unten noch sehr viel Abstand zum Rand.
Ich habe es mit % Angaben versucht, was auch nicht klappt. Auch „position: absolute“ kann ich nur für meinen Schirm hinbiegen, was aber für andere Schirme nicht mehr gilt. Mein 17" Bildschirm hat 1600x900px Auflösung.
Kennt jemand einen Weg, so eine Box zentrisch auf dem Bildschirm anzuordnen?

Gruß
Pauli

Hi.

Das kannst Du erreichen, indem Du zwei divs über die gesamte Anzeigefläche legst und als Tabelle formatierst:

<html>
<title>Vertikal immer mittig</title>
<style type="text/css">
  div.outer {top: 0; left: 0; width: 100%; height: 100%; position: fixed; display: table}
  div.inner {display: table-cell; vertical-align: middle; text-align: center; border:5pt solid blue;}
  div.box {margin-left:auto; margin-right:auto;  padding-top:80px; width:400px; height:200px; border:5pt solid red;}
</style>
<body>
<div class="outer">
  <div class="inner">
    <div class="box">Cool</div>
  </div>
</div>
</body>
</html>

Gruß,
KHK

Hallo KHK,

herzlichen Dank für Deine Erklärung, funktioniert prima!
Das ist mir mehrere Sternchen wert, funktioniert aber nur mit dem Herz.

Gruß
Pauli