Was ist der beste Weg, um vertikal und horizontal center ein HTML-element innerhalb des Arbeitsbereichs?

Sagen wir, ich will auf ein element platzieren, in der Mitte von meinem viewport für die Verwendung als eine popup-Meldung. Es sollte folgende Anforderungen erfüllen:

  • Element bleiben sollte zentriert (horizontal und vertikal) innerhalb des Browsers, auch wenn element Größe dynamisch ändert
  • Element sollte zentriert zu bleiben, wenn der browser in der Größe geändert wird
  • Kein Javascript zugelassen ist
  • Würde noch funktionieren IE7

Ist es ein schöner Weg, dies zu erreichen, ohne Rückgriff auf die Tabelle-basierte Lösung unten?

<table style="position:absolute;width:100%;height:100%">
    <tr>
        <td align="center">
            <span id="centeredContent">I always remain centered</span>
        </td>
    </tr>
</table>
  • Funktioniert diese Hilfe? stackoverflow.com/questions/9656362/...
  • Möglich, Duplikat der stackoverflow.com/questions/49350/..., obwohl es keine Antwort hier.
  • Es ist nur möglich, vertikal-center (ohne JavaScript), wenn Sie wissen, die Höhe von dem element, das Sie versuchen zu zentrieren. Wenn Sie nur eine einzige Zeile text können Sie die center, die auch, aber wieder, Sie hätte eine bekannte Höhe von über line-height.
InformationsquelleAutor JohnW | 2012-03-12
Schreibe einen Kommentar