web-dev-qa-db-fra.com

CSS plein écran div avec le texte au milieu

J'ai une classe css définie pour que je puisse faire en sorte qu'une div utilise toutes les fenêtres du navigateur, la règle est la suivante:

.fullscreenDiv {
    background-color: #e8e8e8;
    width: 100%;
    height: auto;
    bottom: 0px;
    top: 0px;
    left: 0;
    position: absolute;
}

Maintenant, je veux que le texte à l'intérieur de la div soit exactement au centre de l'écran, donc aligner verticalement le centre et aligner horizontalement le milieu, mais je n'arrive pas à trouver le moyen approprié de le faire.

Il ne doit fonctionner que sur les navigateurs Webkit.

J'ai déjà essayé d'ajouter un élément P à l'intérieur avec display défini sur table-cell (moyen courant de centrer le texte) sans succès.

Aucune suggestion?

htmlcsswebkit
27
Juan Alberto López Cavallotti

L’approche standard consiste à donner à l’élément centré des dimensions fixes et à le placer de manière absolue:

<div class='fullscreenDiv'>
    <div class="center">Hello World</div>
</div>​

.center {
    position: absolute;
    width: 100px;
    height: 50px;
    top: 50%;
    left: 50%;
    margin-left: -50px; /* margin is -0.5 * dimension */
    margin-top: -25px; 
}​
40
paislee

La réponse acceptée fonctionne, mais si: 

  • vous ne connaissez pas les dimensions du contenu
  • le contenu est dynamique
  • vous voulez être à l'épreuve du futur

utilisez ceci:

.centered {
  position: fixed; /* or absolute */
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

Plus d'informations sur le centrage de contenu dans cet excellent article CSS-Tricks .

En outre, si vous n'avez pas besoin de supporter les anciens navigateurs: une boîte flexible en fait un morceau de gâteau:

.center{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

Un autre excellent guide sur les flexbox de CSS Tricks; http://css-tricks.com/snippets/css/a-guide-to-flexbox/

30
agconti

Il n'y a pas de solution CSS pure à ce problème classique.

Si vous voulez y parvenir, vous avez deux solutions:

  • Utiliser un tableau (moche, non sémantique, mais le seul moyen d’aligner verticalement des choses qui ne sont pas une seule ligne de texte)
  • Écoute de window.resize et positionnement absolu

EDIT: lorsque je dis qu'il n'y a pas de solution, je suppose que vous ne connaissez pas à l'avance la taille du bloc au centre. Si vous le savez, la solution de paislee est très bonne

3
Samuel Rossille

text-align: center le centrera horizontalement comme pour le placer verticalement dans un span et lui donnera un css de margin:auto 0; (vous devrez probablement aussi donner à span une propriété display: block)

0
Ryan