Fehler, wenn man die absolute position und die Prozentsätze, um vertikal zentrieren div Kind

Ich habe ein div, dass ist mein "popup", dass ich animieren zu zeigen, bis in die direkte Mitte des übergeordneten div. Also ich bin mit absoluter Positionierung, negative Margen, und Links+oben zu positionieren Sie es so, dass ich einfach so animieren, dass er mit -webkit-transform: translateY(-100%) auf hover. Funktioniert auf Safari und Mobile Safari.

Wenn Sie Pixel in Chrome oder Firefox funktioniert es einwandfrei, selbst wenn Sie alle Prozentzahlen, sondern das übergeordnete div-Breite mit Pixel wird es funktionieren. ABER, wenn Sie alle Prozentzahlen FF+Chrome zu gehen scheint, komplett Etagenbett und machen die Prozentsätze basierend auf etwas, das ich nicht herausfinden können.

Fiddle-Beispiel: Diese Ansicht in Safari und FF/Chrome zu sehen, dass Safari rendert #pixels genau das gleiche wie #percents ist und gerendert werden soll in beiden. Ist es Safari-das ist die Erbringung dieses dann falsch?

<div class="container">
    <div class="pretendImage"></div>
    <div id="percents"></div>
</div>

und mein CSS:

#percents {
    width:100%;
    height:100%;
    position:absolute;
    top:50%;
    left:50%;
    margin:-50% 0 0 -50%;
}
.container {
    position:relative;
    width:50%;
    height:auto;
}
.pretendImage {
    width:200px;
    height:200px;
}

Nun fand ich einen workaround, indem Sie eine zusätzliche wrapper. Ich würde noch gerne wissen, welche Ursachen dies aber nicht.

Mein workaround: Fiedel Verwendet ein wrapper um zu vermeiden, dass die Berechnung der Spitze+Ränder der inneren div, verwendet 80% der Breite/Höhe.

  • Alexander, Sie möchten, dass der div(in Prozent) in der Mitte des div(pretendImage) oder div(container)?
  • Sorry das div(pretendImage) war einfach zu erweitern, div(container) in meinem Beispiel und zeigen die Wirkung, die es hat, wenn ich Pixel statt Prozent. In meinem code img(pretendImage) ist width:100%; height:auto ist und daher die gleiche Größe wie das div(container), die ich wollte, div(in Prozent) zentriert werden, wie in meinem workaround habe ich aktualisiert.
Schreibe einen Kommentar