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

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>

Answer 2

Ich verwende die folgende Lösung seit über einem Jahr, 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>

Answer 3

Das funktioniert bei mir. Breite und Höhe des äußeren Divs 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>

Answer 4

Fiddle Link < http://jsfiddle.net/dGHFV/2515/ >

Versuchen Sie 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;
    }

Answer 5

Für innerdiv, die nicht angeben, es ist Höhe Wert, gibt es keine reine CSS-Lösung, um es vertikal zentriert.eine Javascript-Lösung könnte sein, erhalten die innerdiv's offsetHeight, dann berechnen Sie die style.marginTop.