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

Question 1

Question 2

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.

Question 3

Możesz spróbować:

body{ margin:0 auto; }

Question 4

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

Question 5

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/

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

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

Question 8

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

Question 9

Tylko napisz

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

Question 10

Spróbuj tego

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

Answer 1

93

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

html css Rajat Gupta
źródło

4

Poziomo, pionowo czy oba?

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

Answer 2

4

Poziomo, pionowo czy oba?

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

Answer 3

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.

Answer 4

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

Answer 5

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

Answer 6

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

Answer 7

1

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

justinhartman

Answer 8

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

Answer 9

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

Answer 10

1

Który DOCTYPE dopuszcza styleatrybut htmljednostki?

ceving

Answer 11

1

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

abernier

Answer 12

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/

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

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

Don Cheadle

Answer 14

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

Don Cheadle

Answer 15

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

Answer 16

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

Answer 17

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

cjauvin

Answer 18

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

carloswm85

Answer 19

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

Answer 20

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

Answer 21

2

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

shaeed

Answer 22

2

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

kyczawon

Answer 23

0

Spróbuj tego

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

Riccardo Zonta
źródło

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

Odpowiedzi: