Ich möchte ein div zentrieren, das in einem anderen div hinzugefügt wird.
<div id="outerDiv">
<div id="innerDiv">
</div>
</div>
Dies ist das CSS, das ich derzeit verwende.
#outerDiv{
width: 500px;
height: 500px;
position:relative;
}
#innerDiv{
width: 284px;
height: 290px;
position:absolute;
top: 50%;
left:50%;
margin-top: -147px;
margin-left: -144px;
}
Wie Sie sehen, hängt der Ansatz, den ich jetzt verwende, von den Werten für Breite und Höhe von innerDiv
ab. Wenn sich die Breite/Höhe ändert, muss ich die Werte für margin-top
und margin-left
ändern innerDiv
immer unabhängig von ihrer Größe?
Ich habe herausgefunden, dass ich mit margin:auto
das innereDiv horizontal zur Mitte ausrichten kann. Aber wie sieht es mit der vertikalen Allign-Mitte aus?
Die vertikale Ausrichtung in der Mitte funktioniert, aber Sie müssen table-cell
für Ihr übergeordnetes Element und inline-block
für das untergeordnete Element verwenden.
Diese Lösung funktioniert in IE6 & 7 nicht.
Deiner ist der sicherere Weg für diese.
Aber seit Sie Ihre Frage mit CSS3 und HTML5 markiert haben, dachte ich, dass es Ihnen nichts ausmacht, eine moderne Lösung zu verwenden.
Die klassische Lösung (Tabellenlayout)
Dies war meine ursprüngliche Antwort. Es funktioniert immer noch gut und ist die Lösung mit der breitesten Unterstützung. Das Tabellenlayout wird Ihre Rendering-Leistung beeinflussen . Daher würde ich vorschlagen, dass Sie eine der moderneren Lösungen verwenden.
Getestet in:
HTML
<div class="cn"><div class="inner">your content</div></div>
CSS
.cn {
display: table-cell;
width: 500px;
height: 500px;
vertical-align: middle;
text-align: center;
}
.inner {
display: inline-block;
width: 200px; height: 200px;
}
Moderne Lösung (transform)
Da Transformationen jetzt ziemlich gut unterstützt sind, gibt es eine einfachere Möglichkeit, dies zu tun.
CSS
.cn {
position: relative;
width: 500px;
height: 500px;
}
.inner {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
width: 200px;
height: 200px;
}
♥ meine moderne Lieblingslösung (Flexbox)
Ich begann Flexbox immer mehr zu benutzen wird jetzt auch gut unterstützt Dies ist bei weitem der einfachste Weg.
CSS
.cn {
display: flex;
justify-content: center;
align-items: center;
}
Weitere Beispiele und Möglichkeiten: Alle Methoden auf einer Seite vergleichen
Eine andere Möglichkeit, diese horizontale und vertikale Zentrierung zu erreichen, ist:
.Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
( Referenz )
Äußere Divisionen müssen ihre position
auf relative
oder fixed
setzen, und die Innere Div. Muss ihre position
auf absolute
, top
und left
auf 50%
setzen und eine transform: translate(-50%, -50%)
anwenden.
div.cn {
position: relative;
width: 200px;
height: 200px;
background: gray;
text-align: center;
}
div.inner {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background: red;
}
<div class="cn">
<div class="inner">
test
</div>
</div>
Getestet in:
Vertical Align Alles mit nur 3 Zeilen CSS
HTML
<div class="parent-of-element">
<div class="element">
<p>Hello</p>
</div>
</div>
Am einfachsten
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
CSS
.parent-of-element {
position: relative;
height: 500px;
/* or height: 73.61% */
/* or height: 35vh */
/* or height: ANY HEIGHT */
}
.element {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
Nach shouldiprefix das sind die einzigen Präfixe, die Sie brauchen
Sie können auch% als Wert für die 'height'-Eigenschaft von .parent-of-element verwenden, sofern das übergeordnete Element eine Höhe oder einen Inhalt hat, der die vertikale Größe erweitert.
Anstatt mich mit schwer zu schreibendem und schwer zu pflegendem CSS zu verbinden (dies erfordert auch eine sorgfältige Browserüberprüfung!), Finde ich es viel besser, CSS aufzugeben und stattdessen einfach wunderbares HTML 1.0 zu verwenden:
<table id="outerDiv" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="middle" id="innerDiv">
</td>
</tr>
</table>
Damit wird alles erreicht, was das ursprüngliche Poster wollte, und es ist robust und wartbar.
Ich persönlich bevorzuge den Trick, ein verstecktes Pseudoelement zu verwenden, um die gesamte Höhe des äußeren Containers zu überspannen, und es vertikal mit dem anderen Inhalt auszurichten. Chris Coyier hat einen schönen Artikel über die Technik. http://css-tricks.com/centering-in-the-unknown/ .__ Der große Vorteil davon ist die Skalierbarkeit. Sie müssen nicht die Höhe des Inhalts kennen oder sich um das Wachsen/Schrumpfen des Inhalts sorgen. Diese Lösung skaliert :).
Hier ist eine Geige mit all dem CSS, das Sie benötigen, und einem Funktionsbeispiel. http://jsfiddle.net/m5sLze0d/
.center:before {
content: ""; /* Adding Extra Space Above Element */
display: inline-block;
height: 100%;
margin-right: -0.3em;
vertical-align: middle;
}
.center_element {
display:inline-block;
float:none;
vertical-align:middle;
white-space:normal;
text-align:left;
}
#outerDiv{
width: 500px;
height: 500px;
position:relative;
background:grey;
display:flex;
justify-content:center;
align-items:center;
}
#innerDiv{
background:cyan;
width: 284px;
height: 290px;
}
<div id="outerDiv">
<div id="innerDiv">Inner Div
</div>
</div>
Sie können dies tun, indem Sie einfach den oben erwähnten CSS-Stil hinzufügen. Alles Gute. für Abfrage Kommentar schreiben
Wenn Ihre height
nicht eingestellt ist (auto); Sie können dem inneren Div etwas Polsterung (oben und unten) geben, um es vertikal zentrieren zu lassen:
<div>
<div style="padding-top:20px;padding-bottom:20px">
<!--content-->
</div>
</div>
Setzen Sie einfach den Container auf display:table
und dann die inneren Elemente auf display:table-cell
. Legen Sie eine height
für den Container und dann vertical-align:middle
für die inneren Elemente fest. Dies hat eine breite Kompatibilität bis zu den Tagen des IE9.
Beachten Sie, dass die vertikale Ausrichtung von der Höhe des übergeordneten Containers abhängt.
.cn
{
display:table;
height:80px;
background-color:#555;
}
.inner
{
display:table-cell;
vertical-align:middle;
color:#FFF;
padding-left:10px;
padding-right:10px;
}
<div class="cn">
<div class="inner">Item 1</div>
<div class="inner">Item 2</div>
</div>
Bildbeschreibung hier eingeben100% es funktioniert
.div1{
height: 300px;
background: red;
width: 100%;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
}
.div2{
background: green;
height: 100px;
width: 100%;
}
<div class="div1">
<div class="div2">
sdfd
</div>
</div>
Fiddle-Link < http://jsfiddle.net/dGHFV/2515/ >
Versuche dies
#outerDiv{
width: 500px;
height: 500px;
position:relative;
border:1px solid red;
}
#innerDiv{
width: 284px;
height: 290px;
position:absolute;
top: 0px;
left:0px;
right:0px;
bottom:0px;
margin:auto;
border:1px solid green;
}
Das funktioniert für mich. Breite und Höhe des äußeren Bereichs können definiert werden.
Hier der Code:
.outer {
position: relative;
text-align: center;
width: 100%;
height: 150px; // Any height is allowed, also in %.
background: gray;
}
.outer > div:first-child {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background: red;
}
<div class="outer">
<div class="inner">
Put here your text or div content!
</div>
</div>
Ich habe die folgende Lösung seit über einem Jahr verwendet, sie funktioniert auch mit IE 7 und 8.
<style>
.outer {
font-size: 0;
width: 400px;
height: 400px;
background: orange;
text-align: center;
display: inline-block;
}
.outer .emptyDiv {
height: 100%;
background: orange;
visibility: collapse;
}
.outer .inner {
padding: 10px;
background: red;
font: bold 12px Arial;
}
.verticalCenter {
display: inline-block;
*display: inline;
zoom: 1;
vertical-align: middle;
}
</style>
<div class="outer">
<div class="emptyDiv verticalCenter"></div>
<div class="inner verticalCenter">
<p>Line 1</p>
<p>Line 2</p>
</div>
</div>
Wenn Sie nach dem Lesen der oben angegebenen wunderbaren Antworten immer noch nichts verstanden haben.
Hier sind zwei einfache Beispiele, wie Sie dies erreichen können.
.wrapper {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 400px;
height: 300px;
border: 1px solid #555;
}
.container {
display: inline-block;
text-align: left;
padding: 20px;
border: 1px solid #cd0000;
}
<div class="wrapper">
<div class="container">
Center align a div using "<strong>display: table-cell</strong>"
</div>
</div>
.wrapper {
display: flex;
justify-content: center;
width: 400px;
height: 300px;
border: 1px solid #555;
}
.container {
align-self: center;
padding: 20px;
border: 1px solid #cd0000;
}
<div class="wrapper">
<div class="container">
Centering a div using "<strong>display: flex</strong>"
</div>
</div>
Hinweis: Überprüfen Sie die Browserkompatibilität von display: table-cell und flex, bevor Sie die oben genannten Implementierungen verwenden.
versuchen Sie, das innere Element folgendermaßen auszurichten:
top: 0;
bottom: 0;
margin: auto;
display: table;
und natürlich:
position: absolute;
Sie können das div in CSS mit flex vertikal und horizontal zentrieren.
#outerDiv{
width: 500px;
height: 500px;
position:relative;
border:1px solid #000;
margin:0 auto;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
#innerDiv{
width: 284px;
height: 290px;
border:1px solid #eee;
}
Und der zweite ist wie folgt;
#outerDiv{
width: 500px;
height: 500px;
position:relative;
border:1px solid #000;
}
#innerDiv{
max-width: 300px;
height: 200px;
background-color: blue;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
border:1px solid #000;
border-radius:4px;
}
Und das resultierende HTML:
<div id="outerDiv">
<div id="innerDiv"></div>
</div>
Sie können dies mit einem einfachen Javascript (jQuery) -Block tun.
CSS:
#outerDiv{
height:100%;
}
Javascript :
<script type="text/javascript">
$(document).ready(function () {
$("#innerDiv").css('top', ($(window).height() - $("#content").height()) / 2);
});
</script>
Das wird bis zum IE6 funktionieren!
<!DOCTYPE html>
ist auch für IE6 erforderlich! [erzwingt auch den IE6-Standard-Strict-Modus.
(Die Box-Einfärbung ist natürlich nur zu Demonstrationszwecken)
#outer{
width: 205px;
height: 205px;
margin: auto;
text-align: center;
}
#inner{
text-align: left;
vertical-align: middle;
width: 120px;
height: 120px;
display: inline-block;
}
#center{
height: 100%; width:0px;
vertical-align: middle;
display: inline-block;
}
div {background: rgba(0,128,255,.6)}
<div id=outer>
<div id=center></div><div id=inner> The inner DIV
</div>
</div>
für innerdiv, das nicht den Wert für die Höhe angibt, gibt es keine reine css-Lösung, um es vertikal zentriert zu machen. Eine Javascript-Lösung könnte die offsetdicke von innerdiv erhalten, dann die style.marginTop berechnen.
textausrichtung in der Mitte des übergeordneten Elements, Anzeige des Inline-Blocks im untergeordneten Element Dies wird alles am meisten zentrieren. Ich glaube, es nennt sich "Block Float".
<div class="outer">
<div class="inner"> some content </div>
</div><!-- end outer -->
<style>
div.outer{
width: 100%;
text-align: center;
}
div.inner{
display: inline-block;
text-align: left
}
</style>
Dies ist auch eine gute Alternative für Posen, viel Glück!
Ich möchte einen anderen Cross-Browser-Weg zeigen, der diese Frage mithilfe von CSS3 calc()
..__ lösen kann.
Wir können die calc()
-Funktion verwenden, um die margin-top
-Eigenschaft des untergeordneten div zu steuern, wenn diese absolut relativ zum übergeordneten div positioniert ist.
Der Hauptvorteil bei der Verwendung von calc()
ist, dass die Höhe des übergeordneten Elements jederzeit geändert werden kann und das untergeordnete div immer in der Mitte ausgerichtet ist.
Die margin-top
-Berechnung wird dynamisch ausgeführt (durch CSS und nicht durch ein Skript und es ist ein sehr großer Vorteil).
check this LIVE DEMO
<!DOCTYPE html>
<html>
<head>
<style>
#parent{
background-color:blue;
width: 500px;
height: 500px;
position:relative;
}
#child{
background-color:red;
width: 284px;
height: 250px;
position:absolute;
/* the middle of the parent(50%) minus half of the child (125px) will allways center vertically the child inside the parent */
margin-top: -moz-calc(50% - 125px);
/* WebKit */
margin-top: -webkit-calc(50% - 125px);
/* Opera */
margin-top: -o-calc(50% - 125px);
/* Standard */
margin-top: calc(50% - 125px);
}
</style>
</head>
<body>
<div id="parent">
<div id="child">
</div>
</div>
</body>
</html>
Ausgabe:
#outerDiv{
width: 500px;
height: 500px;
position:relative;
background-color: lightgrey;
}
#innerDiv{
width: 284px;
height: 290px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%); /* IE 9 */
-webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */
background-color: grey;
}
<div id="outerDiv">
<div id="innerDiv"></div>
</div>
So zentrieren Sie die Ausrichtung sowohl vertikal als auch horizontal:
#parentDiv{
display:table;
text-align:center;
}
#child {
display:table-cell;
vertical-align:middle;
}