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

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.

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

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

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.

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.