Comment aligner tout le corps HTML au centre?

Comment est-ce que j’aligne le corps entier de HTML au centre?

Je suis juste tombé sur ce vieux post, et même si je suis sûr que user01 a depuis longtemps trouvé sa réponse, j’ai trouvé que les réponses actuelles ne fonctionnaient pas vraiment. Après avoir joué un peu en utilisant les informations fournies par les autres, j’ai trouvé une solution qui fonctionnait dans IE, Firefox et Chrome. En CSS:

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

C’est presque identique à la réponse d’Abernier, mais j’ai trouvé que l’inclusion de la largeur briserait le centrage, tout comme l’omission de la marge automatique. J’espère que toute personne qui trébuche sur ce sujet trouvera ma réponse utile.

Note: Omettre html, body { height: 100%; } html, body { height: 100%; } ne se centrer que horizontalement.

Tu peux essayer:

 body{ margin:0 auto; } 
 html, body {height:100%;} html {display:table; width:100%;} body {display:table-cell; text-align:center; vertical-align:middle;} 

Si j’ai une chose que j’aime partager en ce qui concerne le CSS, c’est MA FAVE WAY OF CENTERING THINGS ALORS LES DEUX AXES !!!

Avantages de cette méthode :

  1. Compatibilité totale avec les navigateurs utilisés par les utilisateurs
  2. Aucune table requirejse
  3. Très réutilisable pour centrer tout autre élément à l’intérieur de leur parent
  4. Accueille les parents et les enfants avec des dimensions dynamics (changeantes)!

Je le fais toujours en utilisant 2 classes: une pour spécifier l’élément parent, dont le contenu sera centré ( .centered-wrapper ), et la .centered-wrapper pour spécifier quel enfant du parent est centré ( .centered-content ). Cette 2e classe est utile dans le cas où le parent a plusieurs enfants, mais seulement 1 doit être centré). Dans ce cas, le body sera le .centered-wrapper et un div interne sera .centered-content .

  ...  
...

L’idée du centrage sera désormais de faire de .centered-content un inline-block . Cela facilitera facilement le centrage horizontal, par text-align: center; , et permet également le centrage vertical comme vous le verrez.

 .centered-wrapper { position: relative; text-align: center; } .centered-wrapper:before { content: ""; position: relative; display: inline-block; width: 0; height: 100%; vertical-align: middle; } .centered-content { display: inline-block; vertical-align: middle; } 

Cela vous donne 2 classes vraiment réutilisables pour centrer n’importe quel enfant à l’intérieur de n’importe quel parent! Ajoutez simplement les .centered-wrapper et .centered-content .

Alors, quoi de neuf avec ça :before élément? Il facilite vertical-align: middle; et est nécessaire parce que l’alignement vertical n’est pas relatif à la hauteur du parent – l’alignement vertical est relatif à la hauteur du plus grand frère !!! . Par conséquent, en veillant à ce qu’il y ait un frère dont la hauteur est la hauteur du parent (100% de hauteur, 0 largeur pour le rendre invisible), nous soaps que l’alignement vertical sera fonction de la hauteur du parent.

Une dernière chose: vous devez vous assurer que vos balises html et body sont de la taille de la fenêtre afin que leur centrage soit identique au centrage sur le navigateur!

 html, body { width: 100%; height: 100%; padding: 0; margin: 0; } 

Violon: https://jsfiddle.net/gershy/g121g72a/

http://bluerobot.com/web/css/center1.html

 body { margin:50px 0; padding:0; text-align:center; } #Content { width:500px; margin:0 auto; text-align:left; padding:15px; border:1px dashed #333; background-color:#eee; } 

J’utilise flexbox sur html . Pour un effet agréable, vous pouvez associer les navigateurs de manière à cadrer votre contenu sur des tailles d’écran plus grandes que votre maximum de pages. Je trouve que #eeeeee correspond assez bien. Vous pouvez append une ombre de boîte pour un bel effet de flottement.

  html{ display: flex; flex-flow: row nowrap; justify-content: center; align-content: center; align-items: center; height:100%; margin: 0; padding: 0; background:#eeeeee; } body { margin: 0; flex: 0 1 auto; align-self: auto; /*recommend 1920 / 1080 max based on usage stats, use 100% to that point*/ width: 100% max-width: 900px; height: 100%; max-height: 600px; background:#fafafa; -webkit-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.75); box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.75); } 

entrer la description de l'image ici entrer la description de l'image ici image / données avec la permission de StatCounter

  

Appliquez simplement ce style avant d’appliquer un CSS. Vous pouvez changer la largeur selon vos besoins.