CSS plein écran div avec du texte au milieu [dupliquer]
Cette question a déjà une réponse ici:
J'ai une classe CSS définie afin que je puisse faire un div pour utiliser toute la fenêtre 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 au centre exact de l'écran, donc, Centre d'alignement vertical et l'alignement horizontal au milieu, mais je n'arrive pas à trouver la bonne façon de le faire.
Il ne doit fonctionner que sur les navigateurs basés sur webkit.
J'ai déjà essayé d'ajouter un élément P à l'intérieur avec display défini sur table-cell (une façon courante de centrer le texte) sans chance.
Des suggestions?
4 réponses
L'approche standard est de donner à l'élément centré des dimensions fixes, et de le placer absolument:
<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;
}
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 contenu de centrage dans cet excellent article CSS-Tricks.
Aussi, si vous n'avez pas besoin de prendre en charge les anciens navigateurs: une flex-box en fait un morceau de gâteau:
.center{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
Un autre excellent guide sur flexboxs de CSS Tricks; http://css-tricks.com/snippets/css/a-guide-to-flexbox/
Il n'y a pas de solution CSS pure à ce problème classique.
Si vous voulez y parvenir, vous avez deux solutions:
- Utilisation d'une table (laide, Non sémantique, mais la seule façon d'aligner verticalement des choses qui ne sont pas une seule ligne de texte)
- écoute de la fenêtre.redimensionnement et positionnement absolu
MODIFIER: quand je dis qu'il n'y a pas de solution, je prends comme hypothèse que vous ne savez pas à l'avance la taille du bloc de centre. Si vous le savez, la solution de paislee est très bonne
text-align: center centre horizontalement que verticalement le mettre dans un span et de lui donner un css de margin:auto 0; (vous aurez probablement aussi pour donner de l'envergure d'un display: block propriété)