Comment aligner tout le corps HTML au centre?

Question 1

Question 2

Je viens de tomber sur cet ancien post, et même si je suis sûr que user01 a trouvé sa réponse depuis longtemps, j'ai trouvé que les réponses actuelles ne fonctionnent pas tout à fait. 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 autre personne qui tombera sur ce fil trouvera ma réponse utile.

Remarque: Omettez html, body { height: 100%; }pour centrer uniquement horizontalement.

Question 3

Tu peux essayer:

body{ margin:0 auto; }

Question 4

ÉDITER

À partir d'aujourd'hui, avec flexbox, vous pouvez

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

RÉPONSE PRÉCÉDENTE

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

Question 5

Si j'ai une chose que j'aime partager en ce qui concerne CSS, c'est MA FAVE MANIÈRE DE CENTRER LES CHOSES SUR LES DEUX AXES !!!

Avantages de cette méthode :

Compatibilité totale avec les navigateurs que les gens utilisent réellement
Aucune table requise
Très réutilisable pour centrer tous les autres éléments à l'intérieur de leur parent
Accueille parents et enfants aux 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 deuxième 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 un seul doit être centré). Dans ce cas, bodysera le .centered-wrapper, et un intérieur divsera .centered-content.

<html>
    <head>...</head>
    <body class="centered-wrapper">
        <div class="centered-content">...</div>
    </body>
</html>

L'idée du centrage sera désormais de faire .centered-contentun inline-block. Cela facilitera facilement le centrage horizontal, à travers text-align: center;, et permettra également un 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 classes .centered-wrapperet .centered-content.

Alors, qu'est-ce qui se passe avec cet :beforeélément? Cela 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 plus grand frère !!! . Par conséquent, en s'assurant qu'il y a un frère dont la hauteur est la hauteur du parent (100% hauteur, 0 largeur pour le rendre invisible), nous savons que l'alignement vertical se fera par rapport à la hauteur du parent.

Une dernière chose: vous devez vous assurer que vos balises htmlet bodyont 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/

Question 6

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;
}

Question 7

J'utilise flexbox sur html. Pour un bel effet, vous pouvez faire correspondre le chrome des navigateurs afin d'encadrer votre contenu sur des tailles d'écran plus grandes que les maximums de votre page. Je trouve que cela #eeeeeecorrespond plutôt bien. Vous pouvez ajouter 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);
    }

image / données avec l'aimable autorisation de StatCounter

Question 8

<style>
        body{
            max-width: 1180px;
            width: 98%;
            margin: 0px auto;
            text-align: left;
        }
</style>

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

Question 9

Ecrivez

<body>
   <center>
            *Your Code Here*
   </center></body>

Question 10

Essaye ça

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