web-dev-qa-db-fra.com

CSS: positionner le texte au milieu de la page

Je souhaite positionner un <h1> au milieu de la page de n'importe quel utilisateur. J'ai cherché sur Internet et ils l'ont tous placé au mauvais endroit. Merci!

MISE À JOUR: Je veux dire vertical et horizontal! Au milieu exact!
AUSSI: Il y a rien d'autre sur la page.

csstextpositioning
29
snarkyazoid

Essayez ce CSS:

h1 {
    left: 0;
    line-height: 200px;
    margin-top: -100px;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 100%;
}

jsFiddle: http://jsfiddle.net/wprw3/

42
Ry-

Voici une méthode utilisant display:flex :

.container {
  height: 100%;
  width: 100%;
  display: flex;
  position: fixed;
  align-items: center;
  justify-content: center;
}
<div class="container">
  <div>centered text!</div>
</div>

Voir sur Codepen
Vérifier la compatibilité du navigateur

28
claytronicon

Même si vous avez accepté une réponse, je souhaite publier cette méthode. J'utilise jQuery pour le centrer verticalement au lieu de css (bien que ces deux méthodes fonctionnent). Ici est un violon, et je posterai quand même le code ici.

HTML: 

<h1>Hello world!</h1>

Javascript (jQuery): 

$(document).ready(function(){
  $('h1').css({ 'width':'100%', 'text-align':'center' });
  var h1 = $('h1').height();
  var h = h1/2;
  var w1 = $(window).height();
  var w = w1/2;
  var m = w - h
  $('h1').css("margin-top",m + "px")
});

Cela prend la hauteur de la fenêtre d'affichage, la divise par deux, soustrait la moitié de la hauteur du h1 et définit ce nombre sur margin-top du h1. La beauté de cette méthode est qu'elle fonctionne sur plusieurs lignes h1s.

EDIT: Je l'ai modifié pour qu'il soit centré à chaque fois que la fenêtre est redimensionnée.

5
Purag