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

tl;dr

Vertikal in der Mitte ausrichten funktioniert, aber Sie müssen die table-cell auf Ihrem übergeordneten Element und inline-block auf das Kind.

Diese Lösung wird in IE6 und 7 nicht funktionieren.
Ihr Weg ist der sicherere für diese Fälle.
Aber da Sie Ihre Frage mit CSS3 und HTML5 getaggt haben, dachte ich, dass es Ihnen nichts ausmacht, eine moderne Lösung zu verwenden.

Die klassische Lösung (Tabellenlayout)

Das war meine ursprüngliche Antwort. Sie funktioniert immer noch gut und ist die Lösung mit der breitesten Unterstützung. Tabellen-Layout wird Auswirkungen auf Ihre Rendering-Leistung Ich würde daher vorschlagen, dass Sie eine der moderneren Lösungen verwenden.

Hier ein Beispiel

---

Getestet in:

• FF3.5+
• FF4+
• Safari 5+
• Chrom 11+
• IE9+

---

HTML

<div class="cn"><div class="inner">your content</div></div>

CSS

.cn {
  display: table-cell;
  width: 500px;
  height: 500px;
  vertical-align: middle;
  text-align: center;
}

.inner {
  display: inline-block;
  width: 200px; height: 200px;
}

---

Moderne Lösung (Transformation)

Da die Transformationen jetzt ziemlich gut unterstützt Es gibt einen einfacheren Weg.

CSS

.cn {
  position: relative;
  width: 500px;
  height: 500px;
}

.inner {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 200px;
  height: 200px;
}

Démo

---

meine bevorzugte moderne Lösung (Flexbox)

Ich habe angefangen, Flexbox mehr und mehr zu verwenden es wird jetzt auch gut unterstützt Das ist bei weitem der einfachste Weg.

CSS

.cn {
  display: flex;
  justify-content: center;
  align-items: center; 
}

Démo

Weitere Beispiele und Möglichkeiten: Vergleichen Sie alle Methoden auf einer Seite

Answer 2

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 )

Answer 3

Eine andere Möglichkeit ist die Verwendung von Transform Translate

Outer Div muss seine position a relative ou fixed und das Inner Div muss seine position a absolute , top y left a 50% und wenden eine transform: translate(-50%, -50%) .

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:

• Oper 24.0 (mindestens 12.1)
• Safari 5.1.7 (mindestens 4 mit -webkit- Präfix)
• Firefox 31.0 (mindestens 3,6 mit -moz- Präfix, ab 16 ohne Präfix)
• Chrom 36 (mindestens 11 mit -webkit- Präfix, ab 36 ohne Präfix)
• IE 11, 10 (mindestens 9 mit Präfix -ms-, ab 10 ohne Präfix)
• Mehr Browser, kann ich verwenden?

Answer 4

Vertikal ausrichten mit nur 3 Zeilen CSS

HTML

<div class="parent-of-element">

    <div class="element">
        <p>Hello</p>
    </div>

</div>

Einfachste

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

Selon sollteiprefix dies sind die einzigen Präfixe, die Sie benötigen

Sie können auch % als Wert für die Eigenschaft "height" von .parent-of-element verwenden, sofern das übergeordnete Element eine Höhe oder einen Inhalt hat, der seine vertikale Größe vergrößert.

Answer 5

Anstatt mich mit schwer zu schreibendem und schwer zu pflegendem CSS (das außerdem eine sorgfältige Cross-Browser-Validierung benötigt!) zu quälen, finde ich es viel besser, auf CSS zu verzichten und stattdessen wunderbar einfaches 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 der ursprüngliche Poster wollte, und es ist robust und wartbar.