vertikal in der Mitte in <div> ausrichten

Ich möchte die Höhe von #abc divat 50pxund den Text so halten, dass er vertikal in der Mitte des Textes ausgerichtet wird div.

body{
  padding: 0;
  margin: 0;
  margin: 0px auto;
}

#main{
  position: relative;
  background-color:blue;
  width:500px;
  height:500px;
}

#abc{
  font:Verdana, Geneva, sans-serif;
  font-size:18px;
  text-align:left;
  background-color:#0F0;
  height:50px;
  vertical-align:middle;
}

<div id="main">
 <div id="abc">
     asdfasdfafasdfasdf
 </div>
</div>

Sie können verwenden line-height: 50px;, Sie werden dort nicht brauchen vertical-align: middle;.

Demo

Das Obige schlägt fehl, wenn Sie mehrere Zeilen haben. In diesem Fall können Sie Ihren Text also mit spanund als verwenden display: table-cell;und display: table;zusammen mit vertical-align: middle;und auch vergessen, width: 100%;für zu verwenden#abc

Demo

#abc{
  font:Verdana, Geneva, sans-serif;
  font-size:18px;
  text-align:left;
  background-color:#0F0;
  height:50px;
  display: table;
  width: 100%;
}

#abc span {
  vertical-align:middle;
  display: table-cell;
}

Eine andere Lösung, die ich mir hier vorstellen kann, ist die Verwendung von transformEigenschaften, bei translateY()denen Yoffensichtlich für Y-Achse steht. Es ist ziemlich einfach ... Alles, was Sie tun müssen, ist die Position der Elemente auf absoluteund später 50%von der Position zu setzen und topvon ihrer Achse mit negativ zu übersetzen-50%

div {
  height: 100px;
  width: 100px;
  background-color: tomato;
  position: relative;
}

p {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Demo

Beachten Sie, dass dies in älteren Browsern, z. B. IE8, nicht unterstützt wird. Sie können jedoch IE9 und andere ältere Browserversionen von Chrome und Firefox mithilfe von -ms, -mozbzw. -webkitPräfixen erstellen.

Weitere Informationen dazu transformfinden Sie hier .

Es ist ganz einfach: Geben Sie dem übergeordneten Div Folgendes:

display: table;

und geben Sie dem Kind div (s) Folgendes:

display: table-cell;
vertical-align: middle;

Das ist es!

.parent{
    display: table;
}
.child{
    display: table-cell;
    vertical-align: middle;
    padding-left: 20px;
}

<div class="parent">
    <div class="child">
        Test
    </div>
    <div class="child">
        Test Test Test <br/> Test Test Test
    </div>
    <div class="child">
        Test Test Test <br/> Test Test Test <br/> Test Test Test
    </div>
<div>

Alte Frage, aber heutzutage macht CSS3 die vertikale Ausrichtung wirklich einfach !

#abcFügen Sie einfach dem folgenden CSS hinzu:

display:flex;
align-items:center;

Einfache Demo

Ursprüngliche Frage Demo aktualisiert

Einfaches Beispiel:

.vertical-align-content {
  background-color:#f18c16;
  height:150px;
  display:flex;
  align-items:center;
  /* Uncomment next line to get horizontal align also */
  /* justify-content:center; */
}

<div class="vertical-align-content">
  Hodor!
</div>

Ich habe diese Lösung von Sebastian Ekström gefunden. Es ist schnell, schmutzig und funktioniert sehr gut. Auch wenn Sie die Größe der Eltern nicht kennen:

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

Lesen Sie den ganzen Artikel hier .

Sie können die Zeilenhöhe so groß wie die Höhe des Div verwenden. Aber für mich ist die beste Lösung dies ->position:relative; top:50%; transform:translate(0,50%);

Wie wäre es mit Hinzufügen line-height?

#abc{
  font:Verdana, Geneva, sans-serif;
  font-size:18px;
  text-align:left;
  background-color:#0F0;
  height:50px;
  vertical-align:middle;
  line-height: 45px;
}

Geige, Zeilenhöhe

Oder paddingweiter #abc. Dies ist das Ergebnis mit Polsterung

Aktualisieren

Fügen Sie in Ihrem CSS hinzu:

#abc img{
   vertical-align: middle;
}

Das Ergebnis . Hoffe das was du suchst.

Versuche dies:

.main_div{
    display: table;
    width: 100%;
}
.cells {
    display: table-cell;
    vertical-align: middle;
}

Eine andere Methode zum Zentrieren eines Div:

<div id="parent">
    <div id="child">Content here</div>
</div>

#parent {position: relative;}

#child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50px;
    height: 100px;
    margin: auto;
}

Verwenden Sie die CSS-Eigenschaft translateY, um Ihren Text vertikal im Container zu zentrieren

<style>
.centertext{

    position: relative;
    top: 50%;
    transform: translateY(40%);

}
</style>

Und wenden Sie es dann auf Ihr enthaltenes DIV an

  <div class="centertext">
        <font style="color:white; font-size:20px;">   Your Text Here </font>
  </div>

Passen Sie den Prozentsatz der Übersetzung an Ihre Bedürfnisse an. Hoffe das hilft

Dieser Code gilt für die vertikale mittlere und horizontale Mittelausrichtung ohne Angabe einer festen Höhe:

.parent-class-name {
  position: relative;
}

.className {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: 0 auto;
  transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}