Vertikal im Ansichtsfenster mithilfe von CSS zentrieren

Question

Vertikal im Ansichtsfenster mithilfe von CSS zentrieren

9

Ich suche ein <div> im Ansichtsfenster (Browserfenster) vertikal zu zentrieren, ohne auf Javascript zurückzugreifen (reines HTML und nur CSS). Ich habe mehrere Einschränkungen:

Der div muss vertikal im Ansichtsfenster zentriert sein. Methoden, die ich gesehen habe, unterstützen nur das Zentrieren in einem anderen <div> , was ich nicht will.
Die Höhe von div ist nicht bekannt.

Andere Einschränkungen:

Die div muss nach rechts ausgerichtet sein.
Die div hat eine konstante Breite.
Die div muss padding unterstützen.
Andere Elemente werden auf der Webseite platziert. Der div fungiert als Menü.
Das div muss eine Hintergrundfarbe / -bild unterstützen.

Das kommt mir nahe, was ich will, aber nicht genau:

%Vor%

Allerdings befindet sich der Anfang des Navigationsbereichs in der Mitte, nicht der mittlere des Navigationsbereichs.

Gibt es eine Technik, die es mir erlaubt, meine div mit diesen Einschränkungen zu zentrieren?

css

strager 18.03.2009, 19:07

quelle

3 Antworten

Tags und Links css

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Empfohlene Methode zum Lesen und Schreiben von INI-Dateien in VBA

score 12 · Answer 1

Was ist das? Wenn man 8 Jahre nimmt, um die Antwort auf ein Problem zu bekommen, ist das zu viel?

Nun, besser spät als nie!

Sie haben wirklich in der Nähe der Lösung. Ich würde es mit transform: translate() machen:

%Vor%

Nach Kann ich verwenden? , es wird von allem außer IE8- und Opera Mini unterstützt (was zu sein) Ehrlich gesagt, ist eine ziemlich gute Unterstützung).

Ich würde dir empfehlen, es ein wenig zu übertreiben und einfach alle Hersteller-Präfixe hinzuzufügen (nur um sicher zu gehen!):

%Vor%

Hier ist ein Ausschnitt, um es Ihnen in Aktion zu zeigen:

%Vor%
%Vor%

Hoffentlich ist es immer noch relevant für Sie! (Ich mache Witze, es war 8 Jahre )

score 1 · Answer 2

1

Sie können dies als eine der Lösungen verwenden.

%Vor%

vikas etagi 13.02.2017 12:50

quelle

score 0 · Answer 3

Der einfachste Weg besteht darin, kein div zu verwenden - verwenden Sie ein table mit einer Zeile und einer Zelle. Die vertikale Ausrichtung wird in CSS leider nicht unterstützt und Sie werden feststellen, dass Sie die Wand und die Decke kodieren, um dies zu erreichen.

Ich verstehe das semantische Argument gegen das, was ich gerade vorgeschlagen habe - ich bin in den meisten Fällen ein Befürworter des semantischen Markups. Ich glaube aber auch daran, das richtige Werkzeug für den richtigen Job zu verwenden. Ich glaube, es ist am besten, in diesem Fall ein wenig Reinheit für eine einfache Lösung zu opfern, die funktionieren wird.