Das CSS3 Flexbox- oder Flex-Layout ermöglicht es, ein Element horizontal und vertikal zu zentrieren, selbst wenn seine Höhe und Breite unbekannt sind.Kann das Flex-Layout verwendet werden, um ein absolut positioniertes Element zu zentrieren?
Kann das Flex-Layout verwendet werden, um ein Overlay (unbekannter Höhe und Breite) in der Mitte einer Seite absolut zu positionieren?
Elemente verlieren ihren flex item Status, wenn sie absolut positioniert sind. Um das zu tun, was Sie vorschlagen, müssen Sie unbedingt den Flex Behälter positionieren:
http://codepen.io/cimmanon/pen/prFdm
.foo {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-box-pack: center;
-webkit-box-align: center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.bar {
margin: auto;
}
<div class="foo">
<div class="bar">Bar</div>
</div>
Bitte beachte, dass ich die moz 2009 Flexbox Präfixe verzichtet habe, weil die absolute Positionierung bricht Flex-Container in Firefox . Es sollte einfach funktionieren in Firefox-Versionen mit den Standard-Flexbox-Eigenschaften.
Das beantwortet tatsächlich meine Frage, aber ... das Problem, das ich mit dieser Lösung habe, ist, dass der Container die gesamte Seite abdeckt, was bedeutet, dass alle darunterliegenden Links nicht mehr funktionieren (nicht nur die darunter liegenden). Kennst du einen Weg, dies zu vermeiden? – Xavi
Das ist eine Einschränkung der absoluten Positionierung. Sie können den Z-Index ändern, aber Sie können .foo nicht unter die anderen Elemente setzen, während oben die Option .bar beibehalten wird. Ohne genau zu sehen, welchen Effekt Sie verfolgen, ist es schwierig, weiter zu beraten. – cimmanon
Ja, das habe ich versucht, d. H. Den Z-Index zu ändern, aber ich habe gefunden, was Sie gerade gesagt haben. Was ich versuche zu tun ist ein Toast, wie Android Toasts (http://developer.android.com/guide/topics/ui/notifiers/toasts.html), aber ich möchte es vertikal auf dem Bildschirm zentrieren und Alle darunter liegenden Links, Schaltflächen usw., die nicht durch den Toast abgedeckt sind, sollten aktiv bleiben. – Xavi
in meinem Fall zentrierte es ein absolutes Element. Browser: 56,0 Chrome https://codepen.io/MarvinXu/pen/WjprpL
.flexbox {
display: flex;
height: 200px;
align-items: center;
}
.abs {
position: absolute;
right: 0;
}<div class="flexbox">
<span>inline</span><span class="abs">position:absolute</span>
</div>funktioniert nicht in Safari 10.1.2 – ramusus
welcher Code haben Sie versucht, so weit? – Vector