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

Answer 1

91

Comment aligner tout le corps HTML au centre?

html css Rajat Gupta
la source

4

Horizontale, verticale ou les deux?

Ciro Santilli 郝海东冠状病六四事件法轮功

Answer 2

4

Horizontale, verticale ou les deux?

Ciro Santilli 郝海东冠状病六四事件法轮功

Answer 3

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.

Answer 4

Bonne réponse. Je me demande simplement (comme je n'ai pas beaucoup d'expérience avec HTML), est-il nécessaire de régler la hauteur à 100%?

coucher du soleil du 8

Answer 5

7

@JackHumphries La hauteur n'est nécessaire que si vous souhaitez aligner le centre de la page sur les axes vertical et horizontal. Si l'horizontale est tout ce que vous voulez, vous pouvez omettre la hauteur.

MildWolfie

Answer 6

36

Tu peux essayer:

body{ margin:0 auto; }

arniotaki
la source

1

C'est une réponse si simple, mais la manière la plus propre et la plus efficace de centrer la balise body au milieu de la page.

justinhartman

1

Bien qu'il soit court, il ne fonctionne pas non plus dans IE, Edge Legacy, Edge, Chrome, ni Firefox. Le problème est que la marge automatique ne fonctionne que lorsque la largeur de l'élément est inférieure à celle du parent. Comme «corps» est par défaut à 100%, il n'y a pas de place sur les bords pour insérer automatiquement les marges. Vous pouvez utiliser body { margin:0 auto; max-width: 700px; }et alors votre corps sera jusqu'à 700px et permettra l'enveloppement sur des appareils plus petits.

user3347790

Answer 7

1

C'est une réponse si simple, mais la manière la plus propre et la plus efficace de centrer la balise body au milieu de la page.

justinhartman

Answer 8

1

Bien qu'il soit court, il ne fonctionne pas non plus dans IE, Edge Legacy, Edge, Chrome, ni Firefox. Le problème est que la marge automatique ne fonctionne que lorsque la largeur de l'élément est inférieure à celle du parent. Comme «corps» est par défaut à 100%, il n'y a pas de place sur les bords pour insérer automatiquement les marges. Vous pouvez utiliser body { margin:0 auto; max-width: 700px; }et alors votre corps sera jusqu'à 700px et permettra l'enveloppement sur des appareils plus petits.

user3347790

Answer 9

16

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

abernier
la source

1

Quel DOCTYPE autorise l' styleattribut de l' htmlentité?

ceving le

1

@ceving: pas sûr de comprendre ... signifie que le CSS n'est pas valide?

abernier

Answer 10

1

Quel DOCTYPE autorise l' styleattribut de l' htmlentité?

ceving le

Answer 11

1

@ceving: pas sûr de comprendre ... signifie que le CSS n'est pas valide?

abernier

Answer 12

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/

Answer 13

8

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

jantimon
la source

quel est le but 0pxà la fin, plutôt que auto?

Don Cheadle

Answer 14

quel est le but 0pxà la fin, plutôt que auto?

Don Cheadle

Answer 15

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

Answer 16

4

Bonne réponse moderne. Juste quelques commentaires. (a) Le préfixe de fournisseur pour box-shadowest probablement redondant car les navigateurs prennent flexégalement en charge box-shadow. (b) Il y a beaucoup de CSS qui embellissent votre réponse, mais rendent les éléments importants difficiles à distinguer. Merci

Manngo

Answer 17

Très bien (b), dans le commentaire de @ Manngo ci-dessus.

cjauvin le

Answer 18

Bonne réponse. Moderne. Mais cela aurait pu être plus simple avec le même contenu.

carloswm85

Answer 19

<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.

Answer 20

3

Ecrivez

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

glacial
la source

1

Le moyen le plus simple et le plus simple de le faire.

shaeed le

1

La balise centrale est obsolète: stackoverflow.com/questions/1798817/…

kyczawon

Answer 21

1

Le moyen le plus simple et le plus simple de le faire.

shaeed le

Answer 22

1

La balise centrale est obsolète: stackoverflow.com/questions/1798817/…

kyczawon

Answer 23

0

Essaye ça

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

Riccardo Zonta
la source

Comment aligner tout le corps HTML au centre?

Réponses: