Wie kann man vertikal in der Mitte des Inhalts eines Divs mit definierter Breite / Höhe ausrichten?

92

Was wäre die richtige Methode, um vertikal Inhalte Mitte in einer definierten Breite / Höhe div.

Im Beispiel gibt es zwei Inhalte mit unterschiedlichen Höhen. Dies ist der beste Weg, um beide mithilfe der Klasse vertikal zu zentrieren .content. (und es funktioniert für jeden Browser und ohne die Lösung von table-cell)

Haben Sie einige Lösungen im Sinn, möchten aber andere Ideen kennen, die man verwendet position:absolute; top:0; bottom: 0;und margin auto.

Ricardo Rodrigues
quelle
2
Ihre Fragen sollten vollständig in sich geschlossen sein. Andernfalls ist es nutzlos, wenn die URL tot ist.
Sparky
1
Mögliches Duplikat: Wie kann ich Text in einem dynamisch hohen Div
Doptrois am
Wahrscheinlich, aber diese Zeit hatte nicht die Lösung, die ich will ... dies bietet mehr Optionen
Ricardo Rodrigues
tl; dr im Jahr 2020 : display: flex; align-items: center;. Wenn Sie nicht möchten, dass es auch horizontal zentriert ist, fügen Sie hinzu flex-direction: column;.
Devin Burke

Antworten:

131

Ich habe dies ein wenig recherchiert und von dem, was ich gefunden habe, haben Sie vier Möglichkeiten:

Version 1: Übergeordnetes Div mit Anzeige als Tabellenzelle

Wenn es Ihnen nichts ausmacht, das display:table-cellauf Ihrem übergeordneten Div zu verwenden, können Sie die folgenden Optionen verwenden:

.area{
    height: 100px;
    width: 100px;
    background: red;
    margin:10px;
    text-align: center;
    display:table-cell;
    vertical-align:middle;
}​

Live DEMO


Version 2: Übergeordnetes Div mit Anzeigeblock und Inhaltsanzeigetabellenzelle

.area{
    height: 100px;
    width: 100px;
    background: red;
    margin:10px;
    text-align: center;
    display:block;
}

.content {
    height: 100px;
    width: 100px;
    display:table-cell;
    vertical-align:middle;    
}​

Live DEMO


Version 3: Parent Div Floating und Content Div als Anzeigetabellenzelle

.area{
    background: red;
    margin:10px;
    text-align: center;
    display:block;
    float: left;
}

.content {
    display:table-cell;
    vertical-align:middle;
    height: 100px;
    width: 100px;
}​

Live DEMO


Version 4: Übergeordnete Div-Position relativ zur Inhaltsposition absolut

Das einzige Problem, das ich mit dieser Version hatte, ist, dass Sie anscheinend das CSS für jede spezifische Implementierung erstellen müssen. Der Grund dafür ist, dass der Inhaltsbereich die festgelegte Höhe haben muss, die Ihr Text ausfüllt, und dass der obere Rand davon abgeleitet wird. Dieses Problem ist in der Demo zu sehen. Sie können es für jedes Szenario manuell zum Laufen bringen, indem Sie die Höhe% Ihres Inhalts div ändern und mit -.5 multiplizieren, um Ihren oberen Randwert zu erhalten.

.area{
    position:relative; 
    display:block;
    height:100px;
    width:100px;
    border:1px solid black;
    background:red;
    margin:10px;
}

.content { 
    position:absolute;
    top:50%; 
    height:50%; 
    width:100px;
    margin-top:-25%;
    text-align:center;
}​

Live DEMO

Josh Mein
quelle
@JoshMein: Ein paar mehr Lösungen: Wie kann ich vertikal Zentrum Text in einem dynamisch hoch div
doptrois
1
Ich suche nach Version 2, aber der Inhalt wird nicht vertikal zentriert. Ist es wichtig, was areaenthalten ist oder was contentInhalt ist?
Shimmy Weitzhandler
60

Dies könnte auch display: flexmit nur wenigen Codezeilen erfolgen. Hier ist ein Beispiel:

.container {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
}

Live-Demo

martin36
quelle
1
@nihiser Nur wenn Sie es auch horizontal zentrieren möchten, oder wenn Sie gesetzt hättenflex-direction: column
martin36
31

Ich habe diese Lösung in diesem Artikel gefunden

.parent-element {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Es funktioniert wie ein Zauber, wenn die Höhe des Elements nicht festgelegt ist.

N Kumar
quelle
1
JFYI, ich habe den gleichen Artikel gefunden und diesen Ansatz verwendet. Ich musste die Position auf absolut ändern, damit es in Chrome funktioniert.
Jack A.
@ JackA. funktioniert mit position: relativein Chrom 62. Nicht sicher, wie weit das zurück geht.
Jared Smith
-7

margin: all_four_margin

Durch die Bereitstellung von 50% für all_four_margin wird das Element in der Mitte platziert

style="margin: 50%"

Sie können es auch für das Folgende anwenden

Rand: oben rechts unten links

Rand: oben rechts und links unten

Rand: oben & unten rechts & links

Durch Angabe des entsprechenden% erhalten wir das Element, wo immer wir wollen.

lokesh
quelle
4
Bitte klären Sie, Ihre Formulierung scheint überall ein bisschen und unzusammenhängend.
Benjamin Trent
Unklare Antwort mit schlechter Formulierung und beschränkt auf die Auflistung der möglichen Werte für margin.
Nuno