CSS: vertikal und horizontal zentrieren

Das ist mit CSS nicht ohne weiteres möglich. Diese Lösung funktioniert mit sogut wie allen Browsern.

Vollständiges Codebeispiel:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>CSS vertical center using float and clear</title>
<style type="text/css">
* {	margin:0;
 padding:0;
 }
html, body {
 height:100%;
 }
body {
 text-align:center; /* horizontal centering for IE Win quirks */
 }
#distance {
 width:1px;
 height:50%;
 margin-bottom:-10em; /* half of container's height */
 float:left;
 }
#container {
 margin:0 auto;
 position:relative; /* puts container in front of distance */
 text-align:left;
 height:20em;
 width:20em;
 clear:left;
 background-color:yellow; /* for demo purpose only */
 }
</style>
</head>
<body>
<div id="distance"></div>
 <div id="container">
<p><strong>CSS vertical and horizontal centering<br>
 using float and clear<br>crossbrowser</strong></p>
 <p>This box stays in the middle of the browser's viewport.</p>
</div>
</body>
</html>

Verwandte Artikel:

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.