Wie kann ich Text (horizontal und vertikal) innerhalb eines div-Blocks zentrieren?

Question

Ich habe eine div eingestellt auf display:block ( 90px height y width ), und ich habe etwas Text darin.

Der Text muss sowohl vertikal als auch horizontal in der Mitte ausgerichtet sein.

Ich habe versucht text-align:center aber die vertikale Zentrierung wird nicht übernommen, also habe ich versucht vertical-align:middle aber es hat nicht funktioniert.

Irgendwelche Ideen?

Answer 1

Wenn es sich um eine Zeile Text und/oder ein Bild handelt, ist es leicht zu machen. Verwenden Sie einfach:

text-align: center;
vertical-align: middle;
line-height: 90px;       /* The same as your div height */

Das war's. Wenn es mehrere Zeilen sein können, dann ist es etwas komplizierter. Aber es gibt Lösungen auf http://pmob.co.uk/ . Suchen Sie nach "vertikal ausrichten".

Da es sich in der Regel um Hacks oder das Hinzufügen komplizierter Divs handelt... Ich verwende in der Regel eine Tabelle mit einer einzigen Zelle zu tun... um es so einfach wie möglich zu machen.

---

Aktualisierung für 2020:

Sofern Sie nicht auf älteren Browsern wie dem Internet Explorer 10 arbeiten müssen, können Sie Flexbox verwenden. Es ist wird von allen gängigen Browsern weitgehend unterstützt . Grundsätzlich muss der Container als Flexcontainer angegeben werden, zusammen mit der Zentrierung entlang seiner Haupt- und Querachse:

#container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Zur Angabe einer festen Breite für das untergeordnete Element, das als "Flexelement" bezeichnet wird:

#content {
  flex: 0 0 120px;
}

Ejemplo: http://jsfiddle.net/2woqsef1/1/

Um den Inhalt einzuschrumpfen, ist es noch einfacher: j flex: ... Zeile aus dem Flexelement, und es wird automatisch eingeschweißt.

Ejemplo: http://jsfiddle.net/2woqsef1/2/

Die obigen Beispiele wurden mit den wichtigsten Browsern getestet, darunter MS Edge und Internet Explorer 11.

Eine technische Anmerkung, falls Sie es anpassen müssen: Innerhalb des Flexelements funktioniert die alte Nicht-Flexbox-Methode von CSS wie erwartet, da dieses Flexelement selbst kein Flexcontainer ist. Wenn Sie jedoch ein zusätzliches Flexelement zum aktuellen Flexcontainer hinzufügen, werden die beiden Flexelemente horizontal platziert. Um sie vertikal zu platzieren, fügen Sie die flex-direction: column; in den Flex-Container. So funktioniert es zwischen einem Flex-Container und seinem sofort untergeordnete Elemente.

Es gibt eine alternative Methode, die Zentrierung vorzunehmen: indem man nicht angibt center für die Verteilung auf der Haupt- und Querachse für den Flexcontainer, sondern geben Sie stattdessen margin: auto auf das Flexelement, um den gesamten zusätzlichen Platz in allen vier Richtungen zu belegen, und die gleichmäßig verteilten Ränder sorgen dafür, dass das Flexelement in allen Richtungen zentriert ist. Dies funktioniert nur, wenn es mehrere flexible Elemente gibt. Außerdem funktioniert diese Technik mit MS Edge, aber nicht mit Internet Explorer 11.

---

Update für 2016 / 2017:

Dies kann in der Regel geschehen mit transform und es funktioniert auch in älteren Browsern wie Internet Explorer 10 und Internet Explorer 11 gut. Es kann mehrere Textzeilen unterstützen:

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

Ejemplo: https://jsfiddle.net/wb8u02kL/1/

Zum Einschweißen der Breite:

Bei der obigen Lösung wurde eine feste Breite für den Inhaltsbereich verwendet. Um eine geschrumpfte Breite zu verwenden, verwenden Sie

position: relative;
float: left;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Ejemplo: https://jsfiddle.net/wb8u02kL/2/

Wenn die Unterstützung für Internet Explorer 10 benötigt wird, dann funktioniert Flexbox nicht und die obige Methode und die line-height Methode funktionieren würde. Andernfalls würde Flexbox die Arbeit erledigen.

Answer 2

Gemeinsame Techniken ab 2014:

---

• Ansatz 1 - transform translateX / translateY :

  Beispiel hier / Beispiel Vollbild

  Unter unterstützte Browser (die meisten von ihnen), können Sie top: 50% / left: 50% in Verbindung mit translateX(-50%) translateY(-50%) um das Element dynamisch vertikal/horizontal zu zentrieren.

  .container {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
  }

---

• Ansatz 2 - Flexbox-Methode:

  Beispiel hier / Beispiel Vollbild

  Unter unterstützte Browser setzen Sie die display des anvisierten Elements auf flex und verwenden align-items: center für die vertikale Zentrierung und justify-content: center für die horizontale Zentrierung. Vergessen Sie nur nicht, die Herstellerpräfixe für zusätzliche Browserunterstützung hinzuzufügen ( siehe Beispiel ).

  html, body, .container {
      height: 100%;
  }
  .container {
      display: flex;
      align-items: center;
      justify-content: center;
  }

---

• Ansatz 3 - table-cell / vertical-align: middle :

  Beispiel hier / Beispiel Vollbild

  In einigen Fällen müssen Sie sicherstellen, dass die html / body Die Höhe des Elements wird festgelegt auf 100% .

  Für die vertikale Ausrichtung setzen Sie das übergeordnete Element width / height a 100% und hinzufügen display: table . Ändern Sie dann für das untergeordnete Element die display a table-cell und hinzufügen vertical-align: middle .

  Für die horizontale Zentrierung können Sie entweder text-align: center um den Text zu zentrieren und alle anderen inline Kinder Elemente. Alternativ können Sie auch margin: 0 auto vorausgesetzt, das Element ist block Ebene.

  html, body {
      height: 100%;
  }
  .parent {
      width: 100%;
      height: 100%;
      display: table;
      text-align: center;
  }
  .parent > .child {
      display: table-cell;
      vertical-align: middle;
  }

---

• Ansatz 4 - Unbedingt positionieren 50% von oben mit Verdrängung:

  Beispiel hier / Beispiel Vollbild

  Dieser Ansatz geht davon aus, dass der Text eine bekannte Höhe hat - in diesem Fall, 18px . Positionieren Sie das Element einfach absolut 50% von oben, relativ zum übergeordneten Element. Verwenden Sie eine negative margin-top Wert, der der Hälfte der bekannten Höhe des Elements entspricht, in diesem Fall - -9px .

  html, body, .container {
      height: 100%;
  }
  .container {
      position: relative;
      text-align: center;
  }
  .container > p {
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      margin-top: -9px;
  }

---

• Ansatz 5 - Die line-height Methode (am wenigsten flexibel - nicht empfohlen):

  Beispiel hier

  In einigen Fällen hat das übergeordnete Element eine feste Höhe. Für die vertikale Zentrierung müssen Sie lediglich ein line-height Wert des untergeordneten Elements, der der festen Höhe des übergeordneten Elements entspricht.

  Obwohl diese Lösung in einigen Fällen funktioniert, ist es erwähnenswert, dass sie nicht funktioniert, wenn mehrere Textzeilen vorhanden sind. wie diese .

  .parent {
      height: 200px;
      width: 400px;
      text-align: center;
  }
  .parent > .child {
      line-height: 200px;
  }

---

Die Methoden 4 und 5 sind nicht die zuverlässigsten. Wählen Sie eine der ersten 3.

Answer 3

Flexbox/CSS verwenden:

<div class="box">
    <p>&#x0D05;</p>
</div>

Der CSS:

.box{
    display: flex;
    justify-content: center;
    align-items: center;
}

Entnommen aus Kurzer Tipp: Die einfachste Art, Elemente vertikal und horizontal zu zentrieren

Answer 4

Fügen Sie die Zeile display: table-cell; zu Ihrem CSS-Inhalt für dieses Div.

Nur Tabellenzellen unterstützen die vertical-align: middle; , aber Sie können diese [table-cell]-Definition an das div...

Ein Live-Beispiel finden Sie hier: http://jsfiddle.net/tH2cc/

div{
    height: 90px;
    width: 90px;
    text-align: center;
    border: 1px solid silver;
    display: table-cell; // This says treat this element like a table cell
    vertical-align:middle; // Now we can center vertically like in a TD
}

Answer 5

Geben Sie diese CSS-Klasse an das gewünschte <div>:

.centered {
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: red; /* Not necessary just to see the result clearly */
}

<div class="centered">This text is centered horizontally and vertically</div>