Mit margin:auto, um vertikal ausrichten eine div

Können Sie nicht verwenden:

vertical-align:middle weil es ist nicht anwendbar auf block-level-Elemente

margin-top:auto und margin-bottom:auto weil Ihre verwendeten Werte berechnen zero

margin-top:-50% weil prozentuale Marge-Werte sind berechnet relativ zu der Breite des umschließenden Blocks

In der Tat, die Art der Belegfluss und element-Berechnung der Höhe algorithmen machen es unmöglich, zu verwenden Margen für die Zentrierung eines Elements vertikal innerhalb seiner Eltern. Wenn ein vertikaler Rand Wert geändert wird, löst Sie ein übergeordnetes element Höhe neu berechnet (re-flow), die wiederum Auslöser einer re-center des ursprünglichen Elements... so dass es eine unendliche Schleife.

Die Sie verwenden können:

Ein paar workarounds wie dieser die Arbeit für Ihr Szenario; die drei Elemente müssen geschachtelt werden, etwa so:

CSS:

.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;
}

HTML:

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

JSFiddle funktioniert nach Browsershot.

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

Wenn Sie haben ein erklärtes height ( height: 1em , height: 50% usw.) oder es ist ein element, wo der browser kennt die Höhe ( img , svg oder canvas zum Beispiel), dann benötigen Sie für die vertikale Zentrierung ist diese:

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

Werden Sie in der Regel angeben möchten eine width oder max-width damit der Inhalt nicht zu dehnen die gesamte Länge des Bildschirms/container.

Wenn Sie dieses für ein modales, dass Sie wollen, immer zentriert in den Arbeitsbereich überlappende andere Inhalte, verwenden Sie position: fixed; für die beiden Elemente statt position: absolute. http://jsfiddle.net/yWnZ2/445/

Hier ist eine vollständige writeup: http://codepen.io/shshaw/pen/gEiDt

Ich weiß, die Frage ist von 2012, aber ich fand die einfachste Art und Weise immer, und ich wollte zu 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; 
}

Diese beiden Lösung benötigen nur zwei verschachtelte Elemente.

Ersten - Relative und absolute Positionierung , wenn der Inhalt statisch ist, (manuelle center).

.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 fluid-design - für genaue content center verwenden Sie folgende Beispiel, statt:

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

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

Müssen Sie 'min-height' gesetzt den Fall, der Inhalt wird über 50% der Fensterhöhe. Sie können auch manipulieren diese Höhe mit media query für mobile Geräte und tablet-Geräte . Aber nur, wenn Du mit responsive design.

Ich denke, Man könnte noch weiter gehen und verwenden Sie einfache JavaScript - /JQuery-Skript zu manipulieren, die min-Höhe oder Feste Höhe, wenn es notwendig ist, für einige Grund.

Zweiten - , wenn der Inhalt flüssig ist u können auch verwenden und die Tabelle-Zelle der css-Eigenschaften mit "vertikale Ausrichtung" und text-align zentriert:

/*in a wrapper*/  
display:table;   

und

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

Funktioniert und perfekt skaliert, oft als responsive Webdesign Lösung mit grid-layouts und media-query zu manipulieren, dass die Breite des Objekts.

.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 lieber Tisch-Lösung für exakte Inhalt zentrieren, aber in einigen Fällen relativ absoluten Positionierung zu tun besseren job, vor allem, wenn wir nicht wollen, zu halten genaue Anteil der content-Ausrichtung.

Gibt es nicht eine einfach Methode zum zentrieren div vertikal was würde den trick in jeder situation.

Jedoch, es gibt viele Möglichkeiten, es zu tun, je nach situation.

Hier sind einige von Ihnen:

• Set-top-und bottom-padding des Elternelements z.B. padding:20px 0px 20px 0px
• Benutzen Sie die Tabelle, Tabellenzelle Zentren Ihrer Inhalte vertikal
• Set parent-element die position und die relative div-s, die Sie möchten, vertikal-center, um absolute und style es wie top:50px; bottom:50px; zum Beispiel

Können Sie auch bei google nach "css vertikale Zentrierung"

Verwendung Von 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 */
}

Ergebnis anzeigen