Vertikales Zentrieren eines div in einem anderen div

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 )

Eine andere Möglichkeit ist die Verwendung von Transform Translate

Ä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:

• Opera 24.0 (Minimum 12.1)
• Safari 5.1.7 (mindestens 4 mit -webkit- Präfix)
• Firefox 31.0 (Minimum 3.6 mit -moz- Präfix, von 16 ohne Präfix) 
• Chrome 36 (Minimum 11 mit -webkit- Präfix, von 36 ohne Präfix)
• IE 11, 10 (Minimum 9 mit -ms- Präfix, von 10 ohne Präfix)
• Weitere Browser, kann ich verwenden?

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>

Div-Elemente in einem anderen Div vertikal zentrieren

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>

https://jsfiddle.net/Mangesh1556/btn1mozd/4/

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. 

Anzeige verwenden: Tabellenzelle

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

Verwendung der Flexbox (Anzeige: Flex)

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

Vertikales Zentrieren eines div in einem anderen div

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