J'ai besoin de créer une page web avec juste un humble contenu (un logo et du texte) à afficher au centre d'une fenêtre de navigateur. Comment puis-je réaliser au mieux cet effet ciblant les navigateurs Web d'aujourd'hui?Quel est le moyen le plus propre de centrer absolument un div (H + V) dans une fenêtre de navigateur?
Voici une solution très simple. Je ne prends aucun crédit pour cela:
http://www.infinitywebdesign.com/research/cssverticalcentereddiv.htm
fonctionne très bien pour un body simple>div situation comme la vôtre. Votre autre option, bien que je crains les répercussions de certains ennemis de la table ici, est que vous pouvez envelopper la div dans une table, et en utilisant la propriété vertical-align:middle dessus pour prendre soin de l'alignement vertical sans javascript. Ensuite, utilisez la marge: 0 auto; sur la div pour gérer le centre horizontal.
Si vous connaissez les dimensions de l'élément (faire le calcul pour les valeurs):
position: absolute;
left: 50%;
top: 50%;
width: ($WIDTH)px;
height: ($HEIGHT)px;
margin: (-$HEIGHT/2)px 0 0 (-$WIDTH/2)px;
Ce qu'il fait, il positionne le coin supérieur gauche de l'élément au centre de la fenêtre et utilise ensuite négative les marges pour centrer le point central vers le centre de la fenêtre.
vous pouvez mettre votre contenu dans une div et fournir la hauteur & cette largeur div puis appliquer cette simple comme u appliquée css largeur 300px & hauteur 300px ::
div {
position: absolute;
top: 50%;
left: 50%;
margin: -150px 0 0 -150px;
}
alors il sera toujours au centre et assurez-vous que vous avez utilisé un DOCTYPE valide.
Je pense qu'il existe un moyen de le centrer verticalement, sauf si vous utilisez js, car vous ne connaîtrez jamais les dimensions de la fenêtre sinon ... Mais il y a une astuce avec des marignés négatifs ou des valeurs de positionnement que je ne connais pas . – prodigitalson
Je pense que cette question a été posée un peu de temps ici avant .. http://stackoverflow.com/search?q=center+a+div –