Comment aligner le texte verticalement au centre de div avec du css?

Question

J'ai une balise div qui contient du texte et je veux aligner le contenu de cette div verticalement centre.

Voici mon div style:

#box
{
    height: 90px;
    width: 270px;
    background: #000;
    font-size: 48px;
    font-style: oblique;
    color: #FFF;
    text-align: center;
    margin-top: 20px;
    margin-left: 5px;
}

Des conseils sur la meilleure façon de le faire?

Answer 1

Vous pouvez essayer cette approche de base:

#box {
  height: 90px;
  line-height: 90px;
}

Démo

Ne fonctionne que pour une seule ligne de texte si, parce que nous définir la ligne de hauteur à la même hauteur que la boîte contenant l'élément.

---

Une approche plus polyvalent

Et voici une autre façon d'aligner le texte verticalement, cette solution fonctionne pour une seule ligne et plusieurs lignes de texte, mais requiert tout de même une fixe en hauteur conteneur:

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

Le CSS juste des tailles de l' <div>, puis verticalement centre aligne l' <span> par réglage de l' <div>'s la hauteur de la ligne égale à sa hauteur, et de faire de l' <span> un inline-block avec vertical-align: center. Elle définit ensuite la hauteur de la ligne de retour à la normale pour l' <span> de sorte que son contenu s'écoule naturellement à l'intérieur du bloc.

div {
  width: 250px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;      
}

Démo

---

La simulation de tableau d'affichage

Et voici une autre option, qui peut ne pas fonctionner sur les anciens navigateurs qui ne supportent pas l' display: table et display: table-cell (en gros, cela signifie que Internet Explorer 7). Le HTML est le même que le deuxième exemple:

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

À l'aide de CSS, nous 'simuler' affichage de la table de comportement, étant donné que les tables de support d'alignement vertical:

div {
  display: table;
  width: 250px;
  height: 100px;
  text-align: center;
}

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

Démo

---

À l'aide de positionnement absolu

Cette technique utilise un positionnement absolu de l'élément de réglage en haut, en bas, à gauche et à droite de 0. Il est décrit plus en détail dans un article sur Smashing Magazine.

Answer 2

D'une autre façon (n'est pas mentionné ici encore) avec Flexbox.

Juste ajouter:

display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */

VIOLON

Un bon endroit pour commencer avec Flexbox pour voir certaines de ses caractéristiques et obtenir la syntaxe pour un maximum de prise en charge du navigateur est flexyboxes

Aussi, la prise en charge des navigateurs de nos jours est assez bonne: caniuse

Pour la compatibilité inter-navigateur pour display: flex et align-items, vous pouvez utiliser les éléments suivants:

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

Answer 3

Vous pouvez easity ce faire, ajoutez le morceau suivant du code CSS:

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

C'est signifie que votre CSS ressemble enfin :

#box {
    height: 90px;
    width: 270px;
    background: #000;
    font-size: 48px;
    font-style: oblique;
    color: #FFF;
    text-align: center;
    margin-top: 20px;
    margin-left: 5px;
    display: table-cell;
    vertical-align: middle;
}

jsfiddle ici

Answer 4

Pour référence et pour ajouter une simple réponse:

Pur CSS:

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

Ou SASS/SCSS Mixin:

@mixin vertical-align {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

L'Utilisation Par:

.class-to-center {
    @include vertical-align;
}

Answer 5

tout le crédit va à ce lien propriétaire @Sébastien Ekström Lien, s'il vous plaît aller à travers cela. le voir en action codepen, en lisant l'article ci-dessus j'ai emballé une démo de violon aussi.

Avec seulement 3 lignes de CSS (à l'exclusion du fournisseur préfixes), nous pouvons, avec l'aide de transformer: translateY à la verticale du centre de ce que nous voulons, même si nous ne savons pas à sa hauteur.

La propriété CSS transform est normalement utilisé pour la rotation et mise à l'échelle des éléments, mais avec son translateY fonction, nous pouvons maintenant verticalement aligner les éléments. Habituellement, cela doit être fait avec le positionnement absolu ou d'un paramètre de ligne de hauteurs, mais elles nécessitent de vous connaître la hauteur de l'élément ou ne fonctionne que sur une seule ligne de texte etc.

Donc, pour ce faire nous écrire:

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

C'est tout ce dont vous avez besoin. C'est une technique similaire à l'absolu de la position de la méthode, mais avec l'avantage que nous n'avons pas à régler la hauteur de l'élément ou de la position de la propriété sur le parent. Il fonctionne tout droit sorti de la boîte, même dans IE9!

Pour le rendre encore plus simple, on peut l'écrire comme un mixin avec son fournisseur de préfixes: