Ich möchte ein "div" vertikal mit CSS zentrieren. Ich möchte keine Tabellen oder JavaScript, sondern nur reines CSS. Ich fand einige Lösungen, aber alle von ihnen fehlen Internet Explorer 6 Unterstützung.
<body>
<div>Div to be aligned vertically</div>
</body>
Wie kann ich ein "div" in allen gängigen Browsern, einschließlich Internet Explorer 6, vertikal zentrieren?
Im Folgenden finden Sie die beste Allround-Lösung, die ich für die vertikale und horizontale Zentrierung eines Inhaltsfelds mit fester Breite und flexibler Höhe erstellen konnte. Es wurde getestet und funktioniert für aktuelle Versionen von Firefox, Opera, Chrome und Safari.
.outer {
display: table;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
margin-left: auto;
margin-right: auto;
width: 400px;
/*whatever width you want*/
}
<div class="outer">
<div class="middle">
<div class="inner">
<h1>The Content</h1>
<p>Once upon a midnight dreary...</p>
</div>
</div>
</div>
Ein Arbeitsbeispiel mit dynamischem Inhalt anzeigen
Ich habe einige dynamische Inhalte eingebaut, um die Flexibilität zu testen, und würde gerne wissen, ob jemand Probleme damit sieht. Es sollte auch gut für zentrierte Overlays funktionieren - Lightbox, Pop-up, etc.
Für die vertikale Zentrierung benötigen Sie eigentlich zwei divs. Das div, das den Inhalt enthält, muss eine Breite und Höhe haben.
#container {
position: absolute;
top: 50%;
margin-top: -200px;
/* half of #content height*/
left: 0;
width: 100%;
}
#content {
width: 624px;
margin-left: auto;
margin-right: auto;
height: 395px;
border: 1px solid #000000;
}
<div id="container">
<div id="content">
<h1>Centered div</h1>
</div>
</div>
Hier ist das [Ergebnis][1]
Leider - aber nicht überraschend - ist die Lösung komplizierter, als man es sich wünschen würde. Außerdem müssen Sie leider zusätzliche Divs um das Div herum verwenden, das Sie vertikal zentrieren möchten.
Bei standardkonformen Browsern wie Mozilla, Opera, Safari usw. müssen Sie das äußere div so einstellen, dass es als Tabelle angezeigt wird, und das innere div so, dass es als Tabellenzelle angezeigt wird - die dann vertikal zentriert werden kann. Für den Internet Explorer müssen Sie das innere div absolut innerhalb des äußeren div positionieren und dann den top auf 50% festlegen. Auf den folgenden Seiten wird diese Technik gut erklärt, und es gibt auch einige Codebeispiele:
Es gibt auch eine Technik, um die vertikale Zentrierung mit JavaScript zu erreichen. Vertikale Ausrichtung von Inhalten mit JavaScript & CSS demonstriert dies.