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

Sie können einen sehr einfachen Code dafür ausprobieren:

  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

Answer 2

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/

Answer 3

2020 Weg

.parent{ 
  display: grid;
  place-items: center;
}

Answer 4

Sie können die flex Eigenschaft an der Elternteil div und fügen Sie die margin:auto Eigenschaft auf die untergeordneten Elemente:

.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;
}

Sie können mehr Optionen sehen von flex hier: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 5

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>