Vertikal-center-Elemente in IE9 mit CSS

Ich habe versucht, verwenden Sie den folgenden code zum zentrieren einer <div> in einem anderen <div> durch die Verwendung von CSS, aber es funktioniert nur in Chrome, nicht mit IE9 und Firefox 13.0.1.
Das folgende ist meine HTML Datei:

<!DOCTYPE HTML>
<html>
<head>
    <link type="text/css" rel="stylesheet" href="test.css">
    <title>test</title>
</head>
<body>
    <div class="container">
        <div class="center">abc</div>
    </div>
</body>
</html>

Folgende ist meine CSS-Datei:

.container{
    position: relative;
    border: 1px solid black;
    width: 600px;
    height: 400px;
    position: relative;
}

.center {
    border: 1px solid blue;
    width: 300px;
    height: 200px;
    position: absolute;
    margin-left: 50%;
    margin-top: 50%;
    top: -100px;
    left: -150px;
}

Fand ich eine andere einfachere problem. Wenn ich den code entfernen top: -100px im obigen CSS-Datei, die untere Grenze der innere div soll genau decken die äußeren div-unteren Rand, da die inneren div-Höhe ist 200px und dem äußeren div die Höhe 400px, und legen Sie dann das innere div margin-top: 50%. Beide divs' unteren Grenzen sollten zusammen sein, aber Sie sind nicht.

Ich fand auch heraus, dass margin-top:50% hängt von äußeren div-Breite. Wenn die Breite länger ist, dann margin-top: 50% wird der innere div-gehen weiter nach unten. Es ist so komisch. Wer kennt die Gründe?

InformationsquelleAutor Joey | 2012-07-13
  1. 2

    Bei Verwendung von Prozentsätzen für die Margen, die Prozentangaben immer in relation zu der Breite des enthaltenden Elements (Quelle).

    Tauschen Sie Ihre margin-top für top und margin-left für left, und es sollte funktionieren:

    .container{
    position: relative;
    border: 1px solid black;
    width: 600px;
    height: 400px;
}

.center {
    border: 1px solid blue;
    width: 300px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -100px;
    margin-left: -150px;
}

    http://jsfiddle.net/rcnWy/1/

    • Sie können auch verkürzen die Erklärung durch die Beseitigung alles unter position: absolute; und hinzufügen margin: 100px 150px;.
    • Das ist ein guter Punkt. Ich nahm an, das war ein erfundenes Beispiel und die richtige version wäre mit ein Behälter mit nicht-festen Abmessungen. Wenn der container hat Feste Abmessungen, obwohl, können Sie auf jeden Fall vereinfachen.
    • Deine Methode ist gut. Mein container ist eigentlich nicht Feste Größe. Ich glaube, ich war nur blind denn mein Fehler ist ein bisschen dumm. Ich habe diese an den falschen stellen. Danke für die Hilfe.
    InformationsquelleAutor Jonathan S.
Schreibe einen Kommentar