Overlay mit zentriert/vertikal ausgerichtet Nachricht

Ich würde gerne ein overlay auf meiner Seite um zu verhindern, dass Benutzer durch klicken irgendwo. Es ist manchmal ganz praktisch. In der Mitte des Overlays möchte ich um eine Meldung wie "bitte warten ..." oder "loading...".

Habe ich eine div, die den gesamten Bildschirm erstreckt und eine Spannweite innerhalb der it, die die Nachricht enthält. Ich schaffte es Mitte der span innerhalb der div horizontal, aber ich habe Mühe mit der vertikalen Ausrichtung der it. Die Nachricht sollte sein, auch vertikal zentriert.

Hier ist mein code bisher:

HTML:

<div id="overlay">
    <span>Please wait...</span>
</div>

CSS:

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  background-color: #000;
  filter: alpha(opacity=50);
  -moz-opacity: 0.5;
  opacity: 0.5;
}

#overlay span {
    padding: 5px;
    border-radius: 5px;
    color: #000;
    background-color: #fff;
}

Hier ist die jsfiddle.

So, wie bekomme ich den span mit der Meldung vertikal zentriert?

InformationsquelleAutor Alexxus | 2013-08-30

Schreibe einen Kommentar