Comment centrer l'ensemble du corps HTML ?

Question

Comment puis-je aligner tout le corps du html au centre ?

Answer 1

Je suis tombé sur ce vieux post, et bien que je sois sûr que l'utilisateur01 ait depuis longtemps trouvé sa réponse, j'ai trouvé que les réponses actuelles ne fonctionnaient pas tout à fait. Après avoir joué un peu en utilisant les informations fournies par les autres, j'ai trouvé une solution qui a fonctionné 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 de abernier, mais j'ai trouvé que inclure la largeur briserait le centrage, tout comme omettre la marge automatique. J'espère que quiconque tombera sur ce fil trouvera ma réponse utile.

Note : Omettre html, body { height: 100%; } pour centrer uniquement horizontalement.

Answer 2

Vous pouvez essayer :

body{ margin:0 auto; }

Answer 3

Essaye ça

body {
max-width: max-content;
margin: auto;
}

Answer 4

ÉDITER

À partir d'aujourd'hui avec flexbox, vous pourriez:

body {
  display:flex; flex-direction:column; justify-content:center;
  min-height:100vh;
}

☝

Answer 5

Si j'ai une chose que j'adore partager en ce qui concerne le CSS, c'est MA MANIÈRE PRÉFÉRÉE DE CENTRER LES CHOSES LE LONG DES DEUX AXES !!!

Avantages de cette méthode :

1. Compatibilité totale avec les navigateurs réellement utilisés par les gens
2. Aucun tableau requis
3. Extrêmement réutilisable pour centrer d'autres éléments à l'intérieur de leur parent
4. Accommode les parents et les enfants avec des dimensions dynamiques (changeantes) !

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

    ...

        ...

L'idée pour centrer maintenant sera de faire de .centered-content un inline-block. Cela permettra de faciliter le centrage horizontal, à travers text-align: center;, et permet également le centrage vertical comme vous pourrez le constater.

.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 ! Il suffit d'ajouter les classes .centered-wrapper et .centered-content.

Alors, qu'est-ce que cet élément :before ? Il facilite vertical-align: middle; et est nécessaire car l'alignement vertical n'est pas relatif à la hauteur du parent - l'alignement vertical est relatif à la hauteur du frère le plus grand !!!. Par conséquent, en veillant à ce qu'il y ait un frère dont la hauteur est la hauteur du parent (hauteur de 100 %, largeur de 0 pour le rendre invisible), nous savons que l'alignement vertical sera par rapport à 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 pour que le centrage sur eux soit le même que le centrage sur le navigateur !

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

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