Ich habe einen divSatz auf display:block( 90px heightund width) und ich habe einen Text darin.

Ich muss den Text sowohl vertikal als auch horizontal in der Mitte ausrichten.

Ich habe es versucht text-align:center, aber es macht nicht den horizontalen Teil, also habe ich es versucht vertical-align:middle, aber es hat nicht funktioniert.

Irgendwelche Ideen?

Wenn es sich um eine Text- und / oder Bildzeile handelt, ist dies einfach. Benutz einfach:

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

Das ist es. Wenn es mehrere Zeilen sein können, ist es etwas komplizierter. Es gibt jedoch 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, verwende ich normalerweise eine Tabelle mit einer einzelnen Zelle, um dies so einfach wie möglich zu gestalten.

Update für 2020:

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

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

So geben Sie eine feste Breite für das untergeordnete Element an, die als "flexibles Element" bezeichnet wird:

#content {
  flex: 0 0 120px;
}

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

Um den Inhalt in Schrumpffolie zu verpacken, ist es noch einfacher: Entfernen Sie einfach die flex: ...Linie aus dem Flex-Element, und es wird automatisch in Schrumpffolie verpackt.

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

Die obigen Beispiele wurden in gängigen Browsern wie MS Edge und Internet Explorer 11 getestet.

Ein technischer Hinweis, wenn Sie ihn anpassen müssen: Da dieser Flex-Artikel innerhalb des Flex-Elements selbst kein Flex-Container ist, funktioniert die alte CSS-Methode ohne Flexbox wie erwartet. Wenn Sie dem aktuellen Flex-Container jedoch ein zusätzliches Flex-Element hinzufügen, werden die beiden Flex-Elemente horizontal platziert. Um sie vertikal zu platzieren, fügen Sie die flex-direction: column;zum Flex-Container hinzu. So funktioniert es zwischen einem Flex-Container und seinen unmittelbaren untergeordneten Elementen.

Es gibt eine alternative Methode zum Zentrieren: Geben Sie nicht centerdie Verteilung auf der Haupt- und Querachse für den Flex-Container an, sondern geben Sie margin: autoauf dem Flex-Element den gesamten zusätzlichen Platz in alle vier Richtungen und die gleichmäßig verteilten Ränder an macht das Flex-Element in alle Richtungen zentriert. Dies funktioniert nur, wenn mehrere Flex-Elemente vorhanden sind. Diese Technik funktioniert auch unter MS Edge, jedoch nicht unter Internet Explorer 11.

Update für 2016/2017:

Es kann häufiger verwendet werden transformund funktioniert auch in älteren Browsern wie Internet Explorer 10 und Internet Explorer 11. Es kann mehrere Textzeilen unterstützen:

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

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

So schrumpfen Sie die Breite ein:

Die obige Lösung verwendete eine feste Breite für den Inhaltsbereich. Verwenden Sie, um eine eingeschweißte Breite zu verwenden

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

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

Wenn die Unterstützung für Internet Explorer 10 benötigt wird, funktioniert die Flexbox nicht und die oben beschriebene Methode und die line-heightMethode funktionieren. Andernfalls würde die Flexbox den Job erledigen.

Gemeinsame Techniken ab 2014:

• Ansatz 1 - transform translateX/ translateY:

  Beispiel hier / Vollbild Beispiel

  In unterstützten Browsern (die meisten von ihnen) können Sie top: 50%/ left: 50%in Kombination mit verwenden, 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 / Vollbild Beispiel

  In unterstützten Browser setzte die displaydes Zielelements flexund die Verwendung align-items: centerfür eine vertikale Zentrierung und justify-content: centerzur horizontalen Zentrierung. Vergessen Sie nicht, 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 / Vollbild Beispiel

  In einigen Fällen müssen Sie , dass das gewährleisten html/ bodyElement Höhe eingestellt ist 100%.

  Stellen Sie für die vertikale Ausrichtung das übergeordnete Element width/ heightto ein 100%und fügen Sie es hinzu display: table. Ändern Sie dann für das untergeordnete Element das displayto table-cellund fügen Sie es hinzu vertical-align: middle.

  Für die horizontale Zentrierung können Sie entweder text-align: centerden Text und andere inlineuntergeordnete Elemente hinzufügen , um sie zu zentrieren . Alternativ können Sie margin: 0 autodavon ausgehen, dass das Element blockeben ist.

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

• Ansatz 4 - Absolut 50%von oben mit Verschiebung positioniert :

  Beispiel hier / Vollbild Beispiel

  Bei diesem Ansatz wird davon ausgegangen, dass der Text eine bekannte Höhe hat - in diesem Fall 18px. Positionieren Sie das Element einfach unbedingt 50%von oben relativ zum übergeordneten Element. Verwenden Sie margin-topin diesem Fall einen negativen Wert, der der Hälfte der bekannten Höhe des Elements entspricht -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-heightMethode (am wenigsten flexibel - nicht vorgeschlagen):

  Beispiel hier

  In einigen Fällen hat das übergeordnete Element eine feste Höhe. Für die vertikale Zentrierung müssen Sie lediglich einen line-heightWert für das untergeordnete Element festlegen , 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. Gehen Sie mit einem der ersten 3.

Verwenden von Flexbox / CSS:

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

Das CSS:

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

Aus dem Quick-Tipp: Der einfachste Weg, Elemente vertikal und horizontal zu zentrieren

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

Nur Tabellenzellen unterstützen die vertical-align: middle;, aber Sie können diese [Tabellenzellen] -Definition der 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
}

Ich verwende immer das folgende CSS für einen Container, um seinen Inhalt horizontal und vertikal zu zentrieren.

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;

Sehen Sie es hier in Aktion: https://jsfiddle.net/yp1gusn7/

Sie können sehr einfachen Code dafür versuchen:

  display: flex;
  align-items: center;
  justify-content: center;

.box{
  height: 90px;
  width: 90px;
  background: green;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="box">
  Lorem
</div>

Codepen-Link: http://codepen.io/santoshkhalse/pen/xRmZwr

Geben Sie diese CSS-Klasse dem Ziel <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>

Sie können die flexEigenschaft beim übergeordneten Element verwenden divund die margin:autoEigenschaft den untergeordneten Elementen hinzufügen :

.parent {
    display: flex;
    /* You can change this to `row` if you want the items side by side instead of stacked */
    flex-direction: column;
}

/* Change the `p` tag to what your items child items are */
.parent p {
    margin: auto;
}

Weitere Optionen finden Sie flexhier: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Ansatz 1

div {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed #f69c55;
}

<div>
  Hello, World!!
</div>

Ansatz 2

div {
  height: 200px;
  line-height: 200px;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. </span>
</div>

Ansatz 3

div {
  display: table;
  height: 100px;
  width: 100%;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: table-cell;
  vertical-align: middle;
}

<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>

<div class="small-container">
    <span>Text centered</span>
</div>

<style>
.small-container {
    width:250px;
    height:250px;
    border:1px green solid;
    text-align:center;
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
.small-container span{
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
</style>

# Parent
{
  display:table;
}

# Child
{
  display: table-cell;
  width: 100%; // As large as its parent to center the text horizontally
  text-align: center;
  vertical-align: middle; // Vertically align this element on its parent
}

Das funktioniert bei mir (OK getestet!):

HTML:

<div class="mydiv">
    <p>Item to be centered!</p>
</div>

CSS:

.mydiv {
    height: 100%; /* Or other */
    position: relative;
}

.mydiv p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%); /* To compensate own width and height */
}

Sie können andere Werte als 50% wählen. Zum Beispiel 25%, um 25% der Eltern zu zentrieren.

<!DOCTYPE html>
<html>
  <head>
    <style>
      .maindiv {
        height: 450px;
        background: #f8f8f8;
        display: -webkit-flex;
        align-items: center;
        justify-content: center;
      }
      p {
        font-size: 24px;
      }
    </style>
  </head>

  <body>
    <div class="maindiv">
      <h1>Title</h1>
    </div>
  </body>
</html>

Sie können die folgenden Methoden ausprobieren:

1. Wenn Sie ein einzelnes Wort oder einen einzeiligen Satz haben, kann der folgende Code den Trick tun.

   Haben Sie einen Text in einem div-Tag und geben Sie ihm eine ID. Definieren Sie die folgenden Eigenschaften für diese ID.

   id-name {
     height: 90px;
     line-height: 90px;
     text-align: center;
     border: 2px dashed red;
   }

   Hinweis: Stellen Sie sicher, dass die Eigenschaft für die Zeilenhöhe mit der Höhe der Teilung übereinstimmt.

   Bild

   Wenn der Inhalt jedoch mehr als ein einzelnes Wort oder eine Zeile enthält, funktioniert dies nicht. Es kann auch vorkommen, dass Sie die Größe einer Division nicht in px oder% angeben können (wenn die Division wirklich klein ist und der Inhalt genau in der Mitte liegen soll).

2. Um dieses Problem zu lösen, können Sie die folgende Kombination von Eigenschaften ausprobieren.

   id-name {
     display: flex;
     justify-content: center;
     align-items: center;
     border: 2px dashed red;
   }

   Bild

   Diese 3 Codezeilen setzen den Inhalt genau in die Mitte einer Abteilung (unabhängig von der Größe der Anzeige). Das "Align-Items: Center" hilft bei der vertikalen Zentrierung, während "Justify-Content: Center" es horizontal zentriert.

   Hinweis: Flex funktioniert nicht in allen Browsern. Stellen Sie sicher, dass Sie geeignete Herstellerpräfixe für zusätzliche Browserunterstützung hinzufügen.

GITTER

.center {
    display: grid;
    justify-items: center;
    align-items: center;
}

.center {
    display: grid;
    justify-items: center;
    align-items: center;
}

.box {
    width: 200px;
    height: 100px;
    background: red;
}

<div class="box center">My text</div>

Anpassen der Linienhöhe, um die vertikale Ausrichtung zu erhalten.

line-height: 90px;

Dies sollte die richtige Antwort sein. Am saubersten und einfachsten:

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

Stil anwenden:

position: absolute;
top: 50%;
left: 0;
right: 0;

Ihr Text wird unabhängig von seiner Länge zentriert.

Das hat bei mir funktioniert:

.center-stuff{
    text-align: center;
    vertical-align: middle;
    line-height: 230px; /* This should be the div height */
}

Für mich war das die beste Lösung:

HTML:

 <div id="outer">  
     <img src="logo.png">
 </div>

CSS:

#outer {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>
        <div style ="text-align: center;">Center horizontal text</div>
        <div style ="position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);">Center vertical text</div>
    </body>
</html> 

Wirklich einfacher Code, der für mich funktioniert! Nur eine Zeile und Ihr Text wird horizontal zentriert.

.center-horizontally{
  justify-content: center;
}

<Card.Footer className="card-body-padding center-horizontally">
  <label className="support-expand-text-light">Call or email Customer Support to change</label>
</Card.Footer>

Die Ausgabe sieht folgendermaßen aus:

Bitte stimmen Sie über diese Antwort ab, wenn dies nur dazu dient, Entwicklern, die nach einfachen Lösungen suchen, Zeit zu sparen. Vielen Dank! :) :)

Versuchen Sie das folgende Beispiel. Ich habe Beispiele für jede Kategorie hinzugefügt: horizontal und vertikal

<!DOCTYPE html>
<html>
    <head>
        <style>
            #horizontal
            {
                text-align: center;
            }
            #vertical
            {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translateX(-50%) translateY(-50%);
            }
         </style>
    </head>
    <body>
         <div id ="horizontal">Center horizontal text</div>
         <div id ="vertical">Center vertical text</div>
    </body>
</html>