Vertikales Zentrieren eines div innerhalb eines anderen div

Question

Ich möchte ein Div zentrieren, das sich innerhalb eines anderen Divs befindet.

<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 können, hängt der Ansatz, den ich jetzt verwende, von der Breite und Höhe der #innerDiv . Wenn sich die Breite/Höhe ändert, muss ich die margin-top y margin-left Werte. Gibt es eine allgemeine Lösung, die ich verwenden kann, um die #innerDiv unabhängig von seiner Größe?

Ich habe herausgefunden, dass die Verwendung von margin: auto können horizontal ausgerichtet werden. #innerDiv in die Mitte. Aber was ist mit der vertikalen Ausrichtung?

Answer 1

Sie können dies tun, indem Sie einfach den unten genannten CSS-Stil hinzufügen. Dies wird von den meisten Browsern unterstützt. Sie können überprüfen aquí für die Browserunterstützung. Ich wünsche Ihnen alles Gute. Für jede Frage bitte kommentieren

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

Answer 2

Ich persönlich bevorzuge den Trick, ein verstecktes Pseudo-Element zu verwenden, das die gesamte Höhe des äußeren Containers einnimmt, und es vertikal an den anderen Inhalten auszurichten. Chris Coyier hat einen schönen Artikel über diese Technik. http://css-tricks.com/centering-in-the-unknown/ Der große Vorteil dieser Lösung ist die Skalierbarkeit. Sie müssen die Höhe des Inhalts nicht kennen und sich keine Gedanken darüber machen, ob er wächst oder schrumpft. Diese Lösung skaliert :).

Hier finden Sie eine Anleitung mit allen CSS, die Sie benötigen, und ein funktionierendes Beispiel. 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;
}

Answer 3

Wenn Sie nach dem Lesen der obigen wunderbaren Antworten immer noch nicht verstanden haben.

Hier sind zwei einfache Beispiele, wie Sie dies erreichen können.

Verwendung von display: table-cell

.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 von flex-box (display: 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: Prüfen Sie die Browser-Kompatibilität von display: table-cell und flex, bevor Sie die oben genannten Implementierungen verwenden.

Answer 4

Vertikale Zentrierung von div-Elementen innerhalb eines anderen div

Setzen Sie den Container einfach auf display:table und dann die inneren Elemente zu display:table-cell . Einstellen height auf den Container, und setzen Sie dann vertical-align:middle auf die inneren Gegenstände. Dies hat breite Kompatibilität zurück so weit wie die Tage des IE9.

Beachten Sie jedoch, 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>

Answer 5

Wenn Ihr height nicht gesetzt ist (auto); Sie können das innere Div mit etwas Padding (oben und unten) versehen, um es vertikal zu zentrieren:

<div>
    <div style="padding-top:20px;padding-bottom:20px">
    <!--content-->
    </div>
</div>