it-swarm.com.de

Rand verwenden: Auto, um ein div vertikal auszurichten

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

Warum funktioniert auch vertical-align:middle; nicht?

.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

85
savinger

Sie können nicht verwenden:

vertical-align:middle weil es ist nicht für Elemente auf Blockebene anwendbar

margin-top:auto und margin-bottom:auto, da ihre verwendeten Werte als null berechnet würden.

margin-top:-50%, da prozentuale Randwerte relativ zu Breite des enthaltenden Blocks berechnet werden

Die Art der Berechnungsalgorithmen für Dokumentenfluss und Elementhöhe macht es jedoch unmöglich, Ränder für die vertikale Zentrierung eines Elements innerhalb des übergeordneten Elements zu verwenden. Immer wenn der Wert eines vertikalen Rands geändert wird, löst er eine Neuberechnung (erneuter Fluss) des übergeordneten Elements aus, die wiederum eine erneute Zentrierung des ursprünglichen Elements auslösen würde, wodurch es zu einer unendlichen Schleife wird.

Sie können verwenden:

Ein paar Problemumgehungen wie diese die für Ihr Szenario funktionieren; Die drei Elemente müssen wie folgt 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 gut nach Browsershot.

139
o.v.

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 der übergeordnete Container flex angezeigt wird, wird yes, margin: auto auto (auch als margin: auto bezeichnet) horizontal und vertikal zentriert, unabhängig davon, ob es sich um ein inline- oder block-Element handelt.

#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 example jfiddle, dessen Größe relativ zum Viewport verwendet wird.

Obwohl die Browserunterstützung für Flexboxes zum Zeitpunkt der Veröffentlichung ein Allzeithoch ist, wird sie von vielen Browsern immer noch nicht unterstützt oder erfordert Herstellerpräfixe. Aktualisierte Informationen zur Browserunterstützung finden Sie unter http://caniuse.com/flexbox .

Aktualisieren

Da diese Antwort etwas Beachtung fand, möchte ich auch darauf hinweisen, dass Sie margin nicht angeben müssen, wenn Sie display: flex verwenden und 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>

74
zpr

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 height deklariert haben (height: 1em, height: 50% usw.) oder wenn es sich um ein Element handelt, bei dem der Browser die Höhe kennt (beispielsweise img, svg oder canvas), dann benötigen Sie zur vertikalen Zentrierung Folgendes:

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

In der Regel sollten Sie eine width oder max-width angeben, damit der Inhalt nicht über die gesamte Länge des Bildschirms/Containers reicht.

Wenn Sie dies für ein Modal verwenden, das im Ansichtsfenster immer zentriert werden soll, um andere Inhalte zu überlappen, verwenden Sie 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

57
shshaw

Keine der Lösungen auf dieser Seite funktioniert (für mich).

Meine Lösung

Html

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

CSS

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

Ich weiß, dass die Frage aus dem Jahr 2012 stammt, aber ich fand den einfachsten Weg, den ich je hatte, 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; 
}
9
Paula Fleck

Wenn Sie die Höhe des div kennen, das Sie zentrieren möchten, können Sie es absolut innerhalb des übergeordneten Elements positionieren und dann den Wert der top auf 50% setzen. Dadurch wird die Oberkante des untergeordneten Elements 50% des übergeordneten Elements heruntergefahren, d. H. Zu niedrig. Ziehen Sie es zurück, indem Sie den margin-top auf die Hälfte seiner Höhe einstellen. Jetzt haben Sie den vertikalen Mittelpunkt des Kinddivs, das sich am vertikalen Mittelpunkt des Elternteils befindet - 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/

7
tuff

Diese beiden Lösungen erfordern nur zwei verschachtelte Elemente.
Erste - 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 for fluid design - für genaues Inhaltscenter verwenden Sie stattdessen das folgende Beispiel:

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

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

Für den Fall, dass der Inhalt 50% der Fensterhöhe überschreitet, muss die Mindesthöhe eingestellt werden. Sie können diese Höhe auch mit der Medienabfrage für mobile Geräte und Tablets ändern. Aber nur, wenn Sie mit Responsive Design spielen. 

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

Second - Wenn der Inhalt fließend ist u kann auch Tabellen- und Tabellenzellen-CSS-Eigenschaften 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 perfekt und skaliert, wird häufig als responsive 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 ziehe die Tischlösung für die exakte Inhaltszentrierung vor, aber in einigen Fällen wird die relative absolute Positionierung eine bessere Arbeit leisten, insbesondere wenn wir nicht das genaue Verhältnis der Inhaltsausrichtung beibehalten möchten.

3
DevWL

.black {
    display:flex;
    flex-direction: column;
    height: 200px;
    background:grey
}
.message {
    background:yellow;
    width:200px;
    padding:10px;
    margin: auto auto;
}
<div class="black">
    <div class="message">
        This is a popup message.
    </div>
</div>

1
Seetpal singh

Es gibt keinen einfachen Weg, div vertikal zu zentrieren, was in jeder Situation den Trick hätte.

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

Hier einige davon:

  • Setzen Sie die obere und untere Auffüllung des übergeordneten Elements für die Auffüllung beispielsweise auf: 20px 0px 20px 0px
  • Tabelle verwenden, Tabellenzelle zentriert ihren Inhalt vertikal
  • Legen Sie die relative Position des übergeordneten Elements und die vertikal zentrierten Divs auf absolut fest und formatieren Sie es als oberste: 50px; unten: 50px; zum Beispiel

Sie können auch nach "css vertical centring" suchen.

0
hasu

variable Höhe, Rand oben und unten Auto

.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 Auto

0
user3668456

Flexbox verwenden:

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

0