Rand verwenden: Auto, um ein Div vertikal auszurichten

Ich weiß also, dass wir ein Div horizontal zentrieren können, wenn wir es verwenden margin:0 auto;. Sollte margin:auto auto;funktionieren, wie ich denke, dass es funktionieren sollte? Auch vertikal zentrieren?

Warum funktioniert das auch nicht vertical-align:middle;?

.black {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,.5);
}
.message {
    background:yellow;
    width:200px;
    margin:auto auto;
    padding:10px;
}

<div class="black">
    <div class="message">
        This is a popup message.
    </div>
</div>

JSFiddle

Update August 2020

Obwohl das Folgende für die nützlichen Informationen immer noch lesenswert ist, haben wir Flexbox schon seit einiger Zeit. Verwenden Sie es einfach gemäß dieser Antwort .

Sie können nicht verwenden:

vertical-align:middleweil es nicht für Elemente auf Blockebene gilt

margin-top:autound margin-bottom:autoweil ihre verwendeten Werte als Null berechnet würden

margin-top:-50%weil prozentuale Randwerte relativ zur Breite des enthaltenen Blocks berechnet werden

Tatsächlich machen es die Algorithmen zur Berechnung des Dokumentenflusses und der Elementhöhe unmöglich, Ränder zum vertikalen Zentrieren eines Elements innerhalb seines übergeordneten Elements zu verwenden. Wenn der Wert eines vertikalen Randes geändert wird, wird eine Neuberechnung der Höhe des übergeordneten Elements (Reflow) ausgelöst, die wiederum eine Neuzentrierung des ursprünglichen Elements auslöst. Dies macht es zu einer Endlosschleife.

Sie können verwenden:

Einige solche Problemumgehungen, die für Ihr Szenario funktionieren. Die drei Elemente müssen so verschachtelt sein:

.container {
    display: table;
    height: 100%;
    position: absolute;
    overflow: hidden;
    width: 100%;
}
.helper {
    #position: absolute;
    #top: 50%;
    display: table-cell;
    vertical-align: middle;
}
.content {
    #position: relative;
    #top: -50%;
    margin: 0 auto;
    width: 200px;
    border: 1px solid orange;
}

<div class="container">
    <div class="helper">
        <div class="content">
            <p>stuff</p>
        </div>
    </div>
</div

JSFiddle funktioniert laut Browsershot einwandfrei .

Da diese Frage 2012 gestellt wurde und wir mit der Browserunterstützung für Flexboxen einen langen Weg zurückgelegt haben, hatte ich das Gefühl, dass diese Antwort obligatorisch ist.

Wenn die Anzeige des übergeordneten Containers ist flex, dann ja , margin: auto auto(auch bekannt margin: auto) arbeiten wird es zum Zentrum sowohl horizontal als auch vertikal, unabhängig davon , ob es ein ist inlineoder blockElement.

#parent {
    width: 50vw;
    height: 50vh;
    background-color: gray;
    display: flex;
}
#child {
    margin: auto auto;
}

<div id="parent">
    <div id="child">hello world</div>
</div>

Beachten Sie, dass die Breite / Höhe nicht unbedingt angegeben werden muss, wie in diesem Beispiel jfiddle, bei dem die Größe relativ zum Ansichtsfenster verwendet wird.

Obwohl die Browserunterstützung für Flexboxen zum Zeitpunkt der Veröffentlichung auf einem Allzeithoch ist, wird sie von vielen Browsern immer noch nicht unterstützt oder es werden Herstellerpräfixe benötigt. Aktuelle Informationen zur Browserunterstützung finden Sie unter http://caniuse.com/flexbox .

Aktualisieren

Da diese Antwort ein wenig Beachtung fand, möchte ich auch darauf hinweisen, dass Sie überhaupt nicht angeben müssen, marginob Sie verwenden, display: flexund alle Elemente im Container zentrieren möchten:

#parent {
    width: 50vw;
    height: 50vh;
    background-color: gray;
    display: flex;
    align-items: center; /* horizontal */
    justify-content: center; /* vertical */
}

<div id="parent">
    <div>hello world</div>
</div>

Hier ist die beste Lösung, die ich gefunden habe: http://jsfiddle.net/yWnZ2/446/ Funktioniert in Chrome, Firefox, Safari, IE8-11 und Edge.

Wenn Sie ein erklärt haben height( height: 1em, height: 50%usw.) oder es ist ein Element , auf dem der Browser die Höhe weiß ( img, svg, oder canvaszum Beispiel), dann alles , was Sie für die vertikale Zentrierung benötigen , ist dies:

.message {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    margin: auto;
}

Normalerweise möchten Sie ein widthoder max-widthso angeben, dass sich der Inhalt nicht über die gesamte Länge des Bildschirms / Containers erstreckt.

Wenn Sie dies für ein Modal verwenden, das immer im Ansichtsfenster zentriert sein soll und andere Inhalte überlappt, verwenden Sie es position: fixed;für beide Elemente anstelle von position: absolute. http://jsfiddle.net/yWnZ2/445/

Hier ist eine vollständigere Beschreibung: http://codepen.io/shshaw/pen/gEiDt

Bearbeiten: Es ist 2020, ich würde stattdessen Flexbox verwenden.

Ursprüngliche Antwort:

Html

<body>
  <div class="centered">
  </div>
</body>

CSS

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Ich weiß, dass die Frage aus dem Jahr 2012 stammt, aber ich habe den einfachsten Weg aller Zeiten gefunden und wollte ihn teilen.

HTML:

<div id="parent">
     <div id="child">Content here</div>
</div>

und CSS:

#parent{
     height: 100%;
     display: table;
}    
#child {
     display: table-cell;
     vertical-align: middle; 
}

Wenn Sie die Höhe des Divs kennen, das Sie zentrieren möchten , können Sie es absolut innerhalb des übergeordneten Div positionieren und dann den topWert auf setzen 50%. Dadurch wird die Spitze des Kindes 50% des Weges des Elternteils gesenkt, dh zu niedrig. Ziehen Sie es wieder nach oben, indem Sie es auf die margin-topHälfte seiner Höhe einstellen . Jetzt haben Sie den vertikalen Mittelpunkt des untergeordneten Divs am vertikalen Mittelpunkt des Elternteils - vertikal zentriert!

Beispiel:

.black {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,.5);
}
.message {
    background:yellow;
    width:200px;
    margin:auto auto;
    padding:10px;
    position: absolute;
    top: 50%;
    margin-top: -25px;
    height: 50px;
}

<div class="black">
    <div class="message">
        This is a popup message.
    </div>
</div>

http://jsfiddle.net/yWnZ2/2/

Diese beiden Lösungen erfordern nur zwei verschachtelte Elemente.
Erstens - Relative und absolute Positionierung, wenn der Inhalt statisch ist (manuelle Mitte).

.black {
    position:relative;
    min-height:500px;
    background:rgba(0,0,0,.5);

}
.message {
    position:absolute;
    margin: 0 auto;
    width: 180px;
    top: 45%; bottom:45%;  left: 0%; right: 0%;
}

https://jsfiddle.net/GlupiJas/5mv3j171/

oder für flüssiges Design - für das genaue Content Center verwenden Sie stattdessen das folgende Beispiel:

.message {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

https://jsfiddle.net/GlupiJas/w3jnjuv0/

Sie müssen die Mindesthöhe festlegen, falls der Inhalt 50% der Fensterhöhe überschreitet. Sie können diese Höhe auch mit einer Medienabfrage für Mobil- und Tablet-Geräte bearbeiten. Aber nur, wenn Sie mit Responsive Design spielen.

Ich denke, Sie könnten noch weiter gehen und ein einfaches JavaScript / JQuery-Skript verwenden, um die Mindesthöhe oder die feste Höhe zu ändern, wenn dies aus irgendeinem Grund erforderlich ist.

Zweitens : Wenn der Inhalt flüssig ist, können Sie auch CSS-Eigenschaften für Tabellen und Tabellenzellen mit vertikaler Ausrichtung und zentrierter Textausrichtung verwenden:

/*in a wrapper*/  
display:table;   

und

/*in the element inside the wrapper*/
display:table-cell;
vertical-align: middle;
text-align: center;

Funktioniert und skaliert perfekt und wird häufig als reaktionsschnelle Webdesign-Lösung mit Rasterlayouts und Medienabfragen verwendet, die die Breite des Objekts beeinflussen.

.black {
    display:table;
    height:500px;
    width:100%;
    background:rgba(0,0,0,.5);

}
.message {
    display:table-cell;
    vertical-align: middle;
    text-align: center;
}

https://jsfiddle.net/GlupiJas/4daf2v36/

Ich bevorzuge eine Tabellenlösung für die exakte Inhaltszentrierung, aber in einigen Fällen ist die relative absolute Positionierung besser geeignet, insbesondere wenn wir den exakten Anteil der Inhaltsausrichtung nicht beibehalten möchten.

Es gibt keine einfache Möglichkeit, div vertikal zu zentrieren, die in jeder Situation den Trick macht.

Es gibt jedoch viele Möglichkeiten, dies je nach Situation zu tun.

Hier sind einige davon:

• Legen Sie die obere und untere Auffüllung des übergeordneten Elements fest, z. B. die Auffüllung: 20px 0px 20px 0px
• Verwenden Sie Tabelle, Tabellenzelle zentriert den Inhalt vertikal
• Stellen Sie die relative Position des übergeordneten Elements und die Divs, die Sie vertikal zentrieren möchten, auf absolut ein und formatieren Sie sie wie oben: 50px; unten: 50px; beispielsweise

Sie können auch für "CSS vertikale Zentrierung" googeln

variable Höhe, Rand oben und unten automatisch

.black {background:rgba(0,0,0,.5);
width: 300px;
height: 100px;
display: -webkit-flex; /* Safari */
display: flex;}
.message{
background:tomato;
margin:auto;
padding:5%;
width:auto;
}

<div class="black">
<div class="message">
    This is a popup message.
</div>

variable Höhe, Rand oben und unten automatisch

Verwenden der Flexbox:

HTML:

<div class="container">
  <img src="http://lorempixel.com/400/200" />
</div>

CSS:

.container {
  height: 500px;
  display: flex;
  justify-content: center; /* horizontal center */
  align-items: center;     /* vertical center */
}

Zeige Ergebnis

.black {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,.5);
}
.message {
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background:yellow;
    width:200px;
    padding:10px;
}

 - 


----------


<div class="black">
<div class="message">
    This is a popup message.
</div>