Ich zentriere einen DIV mithilfe einer Flexbox in einem anderen DIV. Stellen Sie sich ein Dialogfenster vor, das bei Bedarf in der Mitte des Bildschirms angezeigt wird.
Es funktioniert gut, aber es würde viel besser aussehen, wenn der Platz über und unter dem Dialogfeld nicht genau gleich wäre, da 40% des verbleibenden Platzes über und 60% unter dem Dialogfeld liegen. Es wird schwierig, da die Höhe des Dialogfelds von der Textmenge abhängt.
Wenn die Browserhöhe beispielsweise 1000 Pixel und die Höhe des Dialogfensters 400 Pixel beträgt, soll der verbleibende vertikale Raum (600 Pixel) 240 Pixel über und 360 Pixel unter dem Dialogfeld liegen. Ich könnte es mit Javascript machen, aber ich bin gespannt, ob es mit CSS einen cleveren Weg gibt. Ich habe versucht, der #dialogBox DIV einen unteren Rand hinzuzufügen, aber das funktioniert nicht, wenn sich die Dialoghöhe der Browserhöhe nähert.
#dialogBoxPanel
{
position:absolute;
display:flex;
align-items:center;
justify-content:center;
left:0px;
top:0px;
width:100%;
height:100%;
}
#dialogBox
{
width:350px;
}
<div id="dialogBoxPanel">
<div id="dialogBox">Text</div>
</div>
Antworten:
Verwenden Sie Pseudoelement- und Spaltenrichtung, um den Leerraum zu simulieren. Passen Sie einfach
flex-grow
das Pseudoelement an, um zu steuern, wie viel freien Speicherplatz jedes einzelne belegen soll. Gleiches Flex-Grow bietet den gleichen Raum:Code-Snippet anzeigen
Sie können auch
2
und verwenden3
. Wir müssen einfach das gleiche Verhältnis beibehalten:Code-Snippet anzeigen
Eine andere Idee ist es, einen Spitzenwert zu verwenden, der gleich ist,
40%
und die Position mit translate zu korrigieren (gleiche Logik wie50%
beim Zentrieren).quelle
Diese Lösung verwendet
display: grid
, es ist eine neue Funktion. Überprüfen Sie daher unbedingt die Browserunterstützung und klicken Sie hier , um weitere Informationen zu erhalten.Dies ist die Zeile, die den oberen und unteren Bereich steuert:
grid-template-rows: 40fr [content-start] auto [content-end] 60fr;
Der Textinhalt des Snippets kann bearbeitet werden, damit Sie überprüfen können, ob das Feld zentriert bleibt, auch wenn sich die Höhe ändert.
quelle
4fr auto 6fr
. Was Sie haben, funktioniert, aber mit einem gewissen Überlauf, da 40% + 60% + 1fr immer größer als 100% sind und Sie zentrieren, sodass der Überlauf gleichmäßig von oben und unten aufgeteilt wird: jsfiddle.net/cobutn0e/2 . Sie werden auch feststellen, dass es nicht 100% wie erwartet ist1fr=minmax(auto,1fr)
und in Ihrem Fall wird es fallen,auto
da es keinen freien Speicherplatz gibt, da 40% + 60% = 100% (deshalb haben Sie immer einen Überlauf)Sie können Spacer Divs hinzufügen und das Flex-Grow mit einem Verhältnis von 4: 6 einstellen.
quelle
Auf einfache Weise mit Position und Rand habe ich angenommen, dass Ihre Dialoghöhe immer 40% der Browserhöhe beträgt.
HTML
quelle