Wie kann man den gesamten HTML-Körper auf die Mitte ausrichten?

91

Wie richte ich den gesamten HTML-Körper auf die Mitte aus?

html css Rajat Gupta
quelle
4
Horizontal, vertikal oder beides?
Ciro Santilli 7 冠状 病 六四 事件 7

Antworten:

114

Ich bin gerade auf diesen alten Beitrag gestoßen, und obwohl ich sicher bin, dass user01 seine Antwort längst gefunden hat, habe ich festgestellt, dass die aktuellen Antworten nicht ganz funktionieren. Nachdem ich ein wenig mit den Informationen der anderen herumgespielt hatte, fand ich eine Lösung, die in IE, Firefox und Chrome funktionierte. In CSS:

html, body {
    height: 100%;
}

html {
    display: table;
    margin: auto;
}

body {
    display: table-cell;
    vertical-align: middle;
}

Dies ist fast identisch mit Aberniers Antwort, aber ich stellte fest, dass das Einbeziehen der Breite die Zentrierung unterbrechen würde, ebenso wie das Weglassen des automatischen Randes. Ich hoffe, dass jeder andere, der über diesen Thread stolpert, meine Antwort hilfreich findet.

Hinweis: Lassen Sie es weg html, body { height: 100%; }, nur horizontal zu zentrieren .

MildWolfie
quelle
Gute Antwort. Ich frage mich nur (da ich nicht viel Erfahrung mit HTML habe), ist es notwendig, die Höhe auf 100% einzustellen?
Sonnenuntergang.8
7
@JackHumphries Die Höhe ist nur erforderlich, wenn Sie die Seitenmitte sowohl auf der vertikalen als auch auf der horizontalen Achse ausrichten möchten. Wenn Sie nur horizontal möchten, können Sie die Höhe weglassen.
MildWolfie
36

Du kannst es versuchen:

body{ margin:0 auto; }
Arniotaki
quelle
1
Dies ist eine so einfache Antwort und dennoch die sauberste und effizienteste Methode, um das Body-Tag in der Mitte der Seite zu zentrieren.
Justinhartman
1
Während es kurz ist, funktioniert es auch nicht in IE, Edge Legacy, Edge, Chrome oder Firefox. Das Problem ist, dass der automatische Rand nur funktioniert, wenn die Elementbreite kleiner als die des übergeordneten Elements ist. Da "Körper" standardmäßig 100% ist, ist an den Rändern kein Platz zum automatischen Einfügen von Rändern vorhanden. Sie können verwenden body { margin:0 auto; max-width: 700px; }und dann wird Ihr Körper bis zu 700px groß sein und ermöglicht das Wickeln auf kleineren Geräten.
user3347790
16

BEARBEITEN

Ab heute mit Flexbox könnten Sie

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

VORHERIGE ANTWORT

html, body {height:100%;}
html {display:table; width:100%;}
body {display:table-cell; text-align:center; vertical-align:middle;}
abernier
quelle
1
Welcher DOCTYPE erlaubt das styleAttribut der htmlEntität?
Ceving
1
@ceving: nicht sicher zu verstehen ... bedeutet, dass es nicht CSS gültig ist?
Abernier
10

Wenn ich eine Sache habe, die ich gerne in Bezug auf CSS teile, dann ist es MEINE LIEBLINGSMÖGLICHKEIT, DINGE UNTER BEIDEN ACHSEN ZU ZENTRIEREN !!!

Vorteile dieser Methode :

  1. Volle Kompatibilität mit Browsern, die tatsächlich verwendet werden
  2. Keine Tabellen erforderlich
  3. Sehr gut wiederverwendbar, um andere Elemente in ihrem übergeordneten Element zu zentrieren
  4. Nimmt Eltern und Kinder mit dynamischen (sich ändernden) Dimensionen auf!

Ich verwende dazu immer zwei Klassen: eine, um das übergeordnete Element anzugeben, dessen Inhalt zentriert wird ( .centered-wrapper), und die zweite, um anzugeben, welches untergeordnete Element des übergeordneten Elements zentriert ist ( .centered-content). Diese 2. Klasse ist nützlich, wenn der Elternteil mehrere Kinder hat, aber nur 1 zentriert werden muss. In diesem Fall bodywird das sein .centered-wrapperund ein Inneres divwird sein .centered-content.

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

Die Idee für die Zentrierung wird nun sein, .centered-contenteine zu machen inline-block. Dies erleichtert leicht die horizontale Zentrierung durch text-align: center;und ermöglicht auch die vertikale Zentrierung, wie Sie sehen werden.

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

Dies gibt Ihnen 2 wirklich wiederverwendbare Klassen, um jedes Kind innerhalb eines Elternteils zu zentrieren! Fügen Sie einfach die .centered-wrapperund .centered-contentKlassen hinzu.

Also, was ist mit diesem :beforeElement los? Dies erleichtert vertical-align: middle;und ist notwendig, da die vertikale Ausrichtung nicht relativ zur Höhe des Elternteils ist - die vertikale Ausrichtung ist relativ zur Höhe des größten Geschwisters !!!. Indem wir sicherstellen, dass es ein Geschwister gibt, dessen Größe der Größe des Elternteils entspricht (100% Höhe, 0 Breite, um es unsichtbar zu machen), wissen wir, dass die vertikale Ausrichtung in Bezug auf die Größe des Elternteils erfolgt.

Eine letzte Sache: Sie müssen sicherstellen, dass Ihre htmlund bodyTags die Größe des Fensters haben, damit die Zentrierung auf sie der Zentrierung auf den Browser entspricht!

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

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

Gershom
quelle
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
quelle
Was ist der Zweck 0pxam Ende und nicht auto?
Don Cheadle
8

Ich benutze Flexbox auf html. Für einen schönen Effekt können Sie das Chrom des Browsers anpassen, um Ihren Inhalt auf Bildschirmgrößen zu rahmen, die größer als Ihre Seitenmaxima sind. Ich finde das #eeeeeepasst ziemlich gut. Sie können einen Box-Schatten für einen schönen Float-Effekt hinzufügen.

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

Geben Sie hier die Bildbeschreibung ein Geben Sie hier die Bildbeschreibung ein Bild / Daten mit freundlicher Genehmigung von StatCounter

Ronnie Royston
quelle
4
Gute, moderne Antwort. Nur ein paar Kommentare. (a) Das Herstellerpräfix für box-shadowist wahrscheinlich redundant als Browser, die flexauch unterstützen box-shadow. (b) Es gibt viel CSS, das Ihre Antwort verschönert, aber die wichtigen Teile schwer zu unterscheiden macht. Danke
Manngo
Sehr viel (b), in @ Manngos Kommentar oben.
Cjauvin
Gute Antwort. Modern. Aber es hätte einfacher sein können, mit dem gleichen Inhalt.
Carloswm85
4 
<style>
        body{
            max-width: 1180px;
            width: 98%;
            margin: 0px auto;
            text-align: left;
        }
</style>

Wenden Sie diesen Stil einfach an, bevor Sie CSS anwenden. Sie können die Breite nach Bedarf ändern.

CodeDreamerSLS
quelle
3

Einfach schreiben

<body>
   <center>
            *Your Code Here*
   </center></body>
icyNerd
quelle
1
Der einfachste und einfachste Weg, dies zu tun.
shaeed
1
Das Center-Tag ist veraltet: stackoverflow.com/questions/1798817/…
kyczawon
0

Versuche dies

body {
max-width: max-content;
margin: auto;
}
Riccardo Zonta
quelle