Jak wyrównać całą treść HTML do środka?


Odpowiedzi:


115

Właśnie natknąłem się na ten stary post i chociaż jestem pewien, że user01 już dawno znalazł odpowiedź, stwierdziłem, że obecne odpowiedzi nie do końca działają. Po trochę zabawie, korzystając z informacji dostarczonych przez innych, znalazłem rozwiązanie, które działało w IE, Firefox i Chrome. W CSS:

html, body {
    height: 100%;
}

html {
    display: table;
    margin: auto;
}

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

Jest to prawie identyczne z odpowiedzią Abernier, ale odkryłem, że uwzględnienie szerokości złamałoby centrowanie, podobnie jak pominięcie automatycznego marginesu. Mam nadzieję, że moja odpowiedź będzie pomocna dla każdego, kto natknie się na ten wątek.

Uwaga: pomiń, html, body { height: 100%; }aby wyśrodkować tylko w poziomie.


Dobra odpowiedź. Zastanawiam się (ponieważ nie mam dużego doświadczenia z HTML), czy konieczne jest ustawienie wysokości na 100%?
zachód słońca. 8

7
@JackHumphries Wysokość jest konieczna tylko wtedy, gdy chcesz wyrównać środek strony zarówno na osi pionowej, jak i poziomej. Jeśli chcesz tylko poziomo, możesz pominąć wysokość.
MildWolfie

36

Możesz spróbować:

body{ margin:0 auto; }

1
To taka prosta odpowiedź, a jednocześnie najczystszy i najskuteczniejszy sposób wyśrodkowania tagu body na środku strony.
justinhartman

1
Chociaż jest krótki, nie działa również w IE, Edge Legacy, Edge, Chrome ani Firefox. Problem polega na tym, że margin auto działa tylko wtedy, gdy szerokość elementu jest mniejsza niż szerokość elementu nadrzędnego. Ponieważ wartość domyślna „body” wynosi 100%, na krawędziach nie ma miejsca na automatyczne wstawianie marginesów. Możesz użyć body { margin:0 auto; max-width: 700px; }a wtedy Twoje ciało będzie miało nawet 700px i pozwoli na owijanie na mniejszych urządzeniach.
user3347790

17

EDYTOWAĆ

Na dzień dzisiejszy z flexboxem

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

POPRZEDNIA ODPOWIEDŹ

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

1
Który DOCTYPE dopuszcza styleatrybut htmljednostki?
ceving

1
@ceving: nie wiesz, czy rozumiesz ... znaczy, że CSS nie jest poprawny?
abernier

11

Jeśli mam jedną rzecz, którą uwielbiam się dzielić w odniesieniu do CSS, jest to MÓJ ULUBIONY SPOSÓB CENTROWANIA RZECZY NA OBU OSI !!!

Zalety tej metody :

  1. Pełna zgodność z przeglądarkami, z których ludzie faktycznie korzystają
  2. Nie są wymagane żadne tabele
  3. Wielokrotnego użytku w celu wyśrodkowania innych elementów wewnątrz rodzica
  4. Pomieści rodziców i dzieci o dynamicznych (zmieniających się) wymiarach!

Zawsze robię to za pomocą dwóch klas: jednej do określenia elementu nadrzędnego, którego zawartość zostanie wyśrodkowana ( .centered-wrapper), a drugiej do określenia, które dziecko rodzica jest wyśrodkowane ( .centered-content). Ta druga klasa jest przydatna w przypadku, gdy rodzic ma wiele dzieci, ale tylko 1 musi być wyśrodkowana). W tym przypadku bodybędzie to .centered-wrapper, a wewnętrzna divbędzie .centered-content.

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

Pomysł na centrowanie będzie teraz polegał na utworzeniu .centered-contentpliku inline-block. Ułatwi to z łatwością wyśrodkowanie poziome, przelotowe text-align: center;, a także pozwoli na centrowanie w pionie, jak zobaczysz.

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

Daje ci to dwie naprawdę wielokrotne klasy do wyśrodkowania dziecka wewnątrz każdego rodzica! Po prostu dodaj klasy .centered-wrapperi .centered-content.

Więc o co chodzi z tym :beforeelementem? Ułatwia vertical-align: middle;to i jest konieczne, ponieważ wyrównanie w pionie nie jest zależne od wzrostu rodzica - wyrównanie w pionie jest związane z wysokością najwyższego rodzeństwa !!! . Dlatego, upewniając się, że istnieje rodzeństwo, którego wysokość jest wzrostem rodzica (100% wysokości, 0 szerokości, aby było niewidoczne), wiemy, że wyrównanie w pionie będzie dotyczyło wzrostu rodzica.

Ostatnia rzecz: musisz upewnić się, że tagi htmli bodymają rozmiar okna, aby wyśrodkowanie do nich było takie samo, jak wyśrodkowanie w przeglądarce!

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

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



8

Używam flexbox html. Aby uzyskać ładny efekt, możesz dopasować chromowanie przeglądarki, aby kadrować zawartość na ekranach o rozmiarach większych niż maksymalne strony. Uważam, że #eeeeeepasuje całkiem nieźle. Możesz dodać cienie box, aby uzyskać ładny efekt float.

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

wprowadź opis obrazu tutaj wprowadź opis obrazu tutaj obraz / dane dzięki uprzejmości StatCounter


4
Dobra, nowoczesna odpowiedź. Kilka uwag. (a) Przedrostek dostawcy dla box-shadowjest prawdopodobnie zbędny, ponieważ przeglądarki obsługujące flexrównież box-shadow. (b) Jest dużo CSS, które upiększają twoją odpowiedź, ale sprawiają, że ważne fragmenty są trudne do odróżnienia. Dzięki
Manngo

Bardzo (b), w komentarzu @ Manngo powyżej.
cjauvin

Dobra odpowiedź. Nowoczesny. Ale mógł być prostszy z taką samą zawartością.
carloswm85

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

Po prostu zastosuj ten styl przed zastosowaniem jakiegokolwiek CSS. Możesz zmienić szerokość zgodnie ze swoimi potrzebami.



Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.