In einer früheren Version der Layoutspezifikation für CSS-Flexbox wurde die statische Position von absolut positionierten untergeordneten Elementen so festgelegt, als wären sie ein Flex-Element mit einer Größe von 0 × 0 Pixeln. In der aktuellen Version der Spezifikation werden sie vollständig aus dem Fluss entfernt und die statische Position wird anhand der Eigenschaften „align“ und „justify“ festgelegt. Zum Zeitpunkt der Erstellung dieses Artikels wird dies bereits von Edge und Opera 39 für Computer und Android unterstützt.
Angenommen, wir wenden einige Positionierungsmechanismen auf das folgende HTML-Element an.
<div class="container">
<div>
<p>In Chrome 52 and later, the green box should be centered vertically and horizontally in the red box.</p>
</div>
</div>
Fügen Sie etwa Folgendes hinzu:
.container {
display: flex;
align-items: center;
justify-content: center;
}
.container > * {
position: absolute;
}
In Chrome 52 oder höher ist das verschachtelte <div> genau mittig im Container <div> ausgerichtet.
In nicht konformen Browsern befindet sich die linke obere Ecke des grünen Felds in der Mitte oben im roten Feld.
Wenn Sie das selbst in Chrome oder einem anderen Browser ausprobieren möchten, laden Sie unser Beispiel herunter oder besuchen Sie die Live-Demo.