Lightbox Effekt selbst erstellen

[blabla333]

Ich möchte den Lightbox-Effekt selbst zu erstellen - ohne dabei auf die bekannten Scripte zurückgreifen zu müssen.
In meinem Fall möchte ich, dass mit dem Klick auf einen bestimmten Button die Seite abgedunkelt wird und ein weißer Bereich zentriert auf dem Bildschirm erscheint, welchen ich entsprechend mit Inhalt füllen kann.

<div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.75;">
  <div style="position: absolute; left: 50%; top: 50%; background-color: #fff; padding: 10px; height: 80%;width: 80%;">Inhalt</div>
</div>

Wie bekomme ich das Element korrekt zentriert?

Edit: Ich merke, dass der Thread wohl eher in die CSS-Kategorie gehört...

 

[omoxen]

so vielleicht:

<div style="position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background-attachment: scroll; background-repeat: repeat; background-image: none; background-position: 0% 0%; background-size: auto; background-origin: padding-box; background-clip: border-box; background-color: rgba(0, 0, 0, 0.702);">
  <div style="margin-top: 20px; margin-right: auto; margin-bottom: 20px; margin-left: auto; background-attachment: scroll; background-repeat: repeat; background-image: none; background-position: 0% 0%; background-size: auto; background-origin: padding-box; background-clip: border-box; background-color: white; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; box-shadow: 10px 5px 30px 10px black; display: table;">Hallo</div>
</div>

 

[blabla333]

Kann man die Box denn auch vertikal zentrieren?

 

[scbawik]

Wenn du weißt wie groß der Inhalt ist, kannst du es mit negativem margin lösen:

zB:

<div style="position:absolute;left:50%;top:50%;width:600px;height:400px;margin-left:-300px;margin-top:-200px;">Inhalt</div>

Bei der Lösung von omoxen fehlt wahrscheinlich nur ein "vertical-align:middle" aber das ist mir jetzt zu mühsam den Spaghetti-Code zu durchsuchen :)

 

[Banana_Jones]

Wenn du weißt wie groß der Inhalt ist, kannst du es mit negativem margin lösen:

Da die Box eh über Javascript generiert wird, kann man die Höhe dann auch über JS auslesen und einen entsprechenden Margin setzen. Man brauch im Vornherein also die Höhe gar nicht zu wissen