CSS: texte de Position au milieu de la page
j'aimerais position <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. Je vous remercie!
Maj: je veux dire vertical et horizontal! Dans le milieu exact!
Aussi: il y a rien sinon sur la page.
3 réponses
Essayez ce CSS:
h1 {
left: 0;
line-height: 200px;
margin: auto;
margin-top: -100px;
position: absolute;
top: 50%;
width: 100%;
}
jsFiddle:http://jsfiddle.net/wprw3/
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>même si vous avez accepté une réponse, je veux poster 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 le code ici de toute façon.
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 du viewport, le divise par deux, soustrait la moitié de la hauteur de h1, et place ce nombre à la margin-top de la h1. La beauté de cette méthode est qu'il fonctionne sur plusieurs lignes h1 S.
EDIT: je l'ai modifié pour qu'il centré à chaque fois que la fenêtre est redimensionnée.