Was ist der beste Weg, um den Inhalt eines Div vertikal zu zentrieren, wenn die Höhe des Inhalts variabel ist? In meinem speziellen Fall ist die Höhe des Containers div festgelegt, aber es wäre großartig, wenn es eine Lösung gäbe, die in Fällen funktioniert, in denen der Container auch eine variable Höhe hat. Außerdem würde ich eine Lösung lieben, bei der CSS-Hacks und / oder nicht-semantisches Markup nicht oder nur sehr wenig verwendet werden.
css
vertical-alignment
Jessegavin
quelle
quelle
Antworten:
Einfach hinzufügen
zum inneren div.
Es bewegt den oberen Rand des inneren Div auf die halbe Höhe des äußeren Div (
top: 50%;
) und dann den inneren Div um die Hälfte seiner Höhe (transform: translateY(-50%)
). Dies funktioniert mitposition: absolute
oderrelative
.Beachten Sie dies
transform
und verwenden Sietranslate
Herstellerpräfixe, die der Einfachheit halber nicht enthalten sind.Codepen: http://codepen.io/anon/pen/ZYprdb
quelle
transform
verwandten Dinge-webkit-
vorangestellt sind und jetzt funktioniert es. Nur zur Erinnerung: Vergessen Sie nicht, auch das-webkit-
Präfix hinzuzufügen .position: absolute
, nicht wahr?translate
wird alles verschwommen, wenn er versucht, die Höhe von 0,5 Pixel für alles zu verarbeiten.Dies scheint die beste Lösung zu sein, die ich für dieses Problem gefunden habe, solange Ihr Browser das Pseudoelement unterstützt
::before
: CSS-Tricks: Zentrieren im Unbekannten .Es erfordert kein zusätzliches Markup und scheint sehr gut zu funktionieren. Ich konnte die
display: table
Methode nicht verwenden , datable
Elemente dermax-height
Eigenschaft nicht gehorchen .quelle
.block { white-space: nowrap; font-size: 0; line-height: 0; }
den negativen rechten Rand zum Pseudoelement hinzufügen und belassen. Sie müssen nur fs und lh auf .centered zurücksetzen. Auf diese Weise stellen Sie sicher, dass das Element korrekt positioniert wird, auch wenn es breiter als das Ansichtsfenster ist (und don Ich muss das Imo nicht verwenden (ein bisschen chaotisch negativer Rand).Dies ist etwas, was ich schon oft tun musste, und für eine konsistente Lösung müssen Sie immer noch ein wenig nicht-semantisches Markup und einige browserspezifische Hacks hinzufügen. Wenn wir Browser-Unterstützung für CSS 3 erhalten, erhalten Sie Ihre vertikale Zentrierung ohne Sünde.
Zur besseren Erklärung der Technik können Sie den Artikel lesen, aus dem ich ihn angepasst habe. Im Grunde geht es jedoch darum, ein zusätzliches Element hinzuzufügen und verschiedene Stile in IE und Browsern anzuwenden, die
position:table\table-cell
Nicht-Tabellenelemente unterstützen.Es gibt viele Möglichkeiten (Hacks), Stile in bestimmten Browsersätzen anzuwenden. Ich habe bedingte Kommentare verwendet, aber schauen Sie sich den oben verlinkten Artikel an, um zwei andere Techniken zu sehen.
Hinweis: Es gibt einfache Möglichkeiten, eine vertikale Zentrierung zu erzielen, wenn Sie einige Höhen im Voraus kennen, wenn Sie versuchen, eine einzelne Textzeile zu zentrieren, oder in mehreren anderen Fällen. Wenn Sie mehr Details haben, werfen Sie diese ein, da es möglicherweise eine Methode gibt, die keine Browser-Hacks oder nicht-semantisches Markup erfordert.
Update: Wir beginnen, eine bessere Browserunterstützung für CSS3 zu erhalten, indem wir sowohl Flex-Box als auch Transformationen als alternative Methoden für die vertikale Zentrierung (unter anderem) anbieten. Weitere Informationen zu modernen Methoden finden Sie in dieser anderen Frage. Beachten Sie jedoch, dass die Browserunterstützung für CSS3 immer noch lückenhaft ist.
quelle
Mit der Kinderauswahl habe ich Fadis unglaubliche Antwort oben auf nur eine CSS-Regel reduziert, die ich anwenden kann. Jetzt muss ich nur noch den
contentCentered
Klassennamen zu den Elementen hinzufügen, die ich zentrieren möchte:Forked CodePen: http://codepen.io/dougli/pen/Eeysg
quelle
*
Selektor schlechter abschneidet als die akzeptierte Antwort. Könnte kein Problem sein, ist aber erwähnenswert. stevesouders.com/blog/2009/06/18/simplifying-css-selectors> div
stattdessen auf auswählen . calendar.perfplanet.com/2011/…Bestes Ergebnis für mich bisher:
div zentriert werden:
quelle
Sie können margin auto verwenden. Mit Flex scheint das Div auch vertikal zentriert zu sein.
quelle
Für mich ist der beste Weg, dies zu tun:
Der Vorteil ist, dass die Höhe nicht explizit angegeben werden muss
quelle
Dies ist meine großartige Lösung für eine
div
mit einer dynamischen (prozentualen) Höhe.CSS
HTML
Versuchen Sie es selbst.
quelle
Sie können eine flexible Anzeige wie den folgenden Code verwenden:
quelle