Centrer verticalement le contenu de la page

Je sais comment je peux centrer horizontalement la page entière avec CSS. Mais existe-t-il un moyen de centrer verticalement la page? Quelque chose comme ça ...Centrer verticalement le contenu de la page

Example

Source

2011-03-12 Pieter

J'espère que cela vous aide http://tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/ –

Grand article ... '.className {width: 300px; hauteur: 200px; position: absolue; gauche: 50%; en haut: 50%; marge: -100px 0 0 -150px; } 'l'ai fait pour moi. Pouvez-vous poster ceci comme une réponse à ma question pour que je puisse l'accepter? – Pieter

Il y a un grand article dans MicroTut de le faire http://tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/

Centrer avec CSS:

.className{ 
    width:300px; 
    height:200px; 
    position:absolute; 
    left:50%; 
    top:50%; 
    margin:-100px 0 0 -150px; 
}

Centrer avec JQuery:

$(window).resize(function(){ 

    $('.className').css({ 
     position:'absolute', 
     left: ($(window).width() - $('.className').outerWidth())/2, 
     top: ($(window).height() - $('.className').outerHeight())/2 
    }); 

}); 

// To initially run the function: 
$(window).resize();

Et vous pouvez voir une démo here

Source

2011-03-12 13:40:50

Vous pouvez également pirater CSS et de display: tabledisplay: table-cell à cet effet. Le code HTML serait comme ceci:

<body> 
    <div id="body"> 
     <!-- Content goes here --> 
    </div> 
</body>

Et le CSS:

html, 
body { 
    width: 100%; 
    height: 100%; 
} 
html { 
    display: table; 
} 
body { 
    display: table-cell; 
    vertical-align: middle; 
}

Si vous voulez centrage horizontal ainsi, puis ajoutez ceci:

#body { 
    max-width: 1000px; /* Or whatever makes sense for you. */ 
    margin: 0 auto; 
}

Certains appelleraient cela un abus de CSS mais:

Il fonctionnera exactement le même à peu près partout.
Nécessite un balisage et un style minimal.
Et l'alignement vertical de CSS mérite un peu d'abus; l'alignement vertical ne devrait pas nécessiter le piratage, les contorsions et le dimensionnement absolu.

Références:

Source

2011-03-12 21:38:39

Centrer verticalement le contenu de la page

Répondre

Questions connexes