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

93

html css

— Rajat Gupta
źródło

4

Poziomo, pionowo czy oba?

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

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.

— MildWolfie
źródło

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

— arniotaki
źródło

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

— abernier
źródło

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 :

Pełna zgodność z przeglądarkami, z których ludzie faktycznie korzystają
Nie są wymagane żadne tabele
Wielokrotnego użytku w celu wyśrodkowania innych elementów wewnątrz rodzica
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/

— Gershom
źródło

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
źródło

jaki jest cel 0pxna końcu, a nie auto?

— Don Cheadle

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

obraz / dane dzięki uprzejmości StatCounter

— Ronnie Royston
źródło

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.

— CodeDreamerSLS
źródło

4

Tylko napisz

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

— icyNerd
źródło

2

Najłatwiejszy i najprostszy sposób na zrobienie tego.

— shaeed

2

Środkowy tag jest przestarzały: stackoverflow.com/questions/1798817/…

— kyczawon

0

Spróbuj tego

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

— Riccardo Zonta
źródło