Como alinhar todo o corpo html ao centro?

Question 1

Como faço para alinhar todo o corpo html ao centro?

Question 2

Acabei de topar com esta postagem antiga e, embora tenha certeza de que user01 já encontrou a resposta há muito tempo, descobri que as respostas atuais não funcionam muito bem. Depois de brincar um pouco usando as informações fornecidas pelos outros, encontrei uma solução que funcionava no IE, Firefox e Chrome. Em CSS:

html, body {
    height: 100%;
}

html {
    display: table;
    margin: auto;
}

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

Isso é quase idêntico à resposta de abernier, mas descobri que incluir a largura quebraria a centralização, assim como omitiria a margem automática. Espero que qualquer outra pessoa que tropeçar neste tópico considere minha resposta útil.

Observação: omita html, body { height: 100%; }centralizar apenas horizontalmente.

Question 3

Podes tentar:

body{ margin:0 auto; }

Question 4

EDITAR

A partir de hoje com o flexbox, você poderia

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

RESPOSTA ANTERIOR

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

Question 5

Se eu tenho uma coisa que adoro compartilhar com relação ao CSS, é MINHA MANEIRA FAVE DE CENTRAR AS COISAS EM AMBOS OS EIXOS !!!

Vantagens deste método :

Compatibilidade total com navegadores que as pessoas realmente usam
Nenhuma mesa necessária
Altamente reutilizável para centralizar qualquer outro elemento dentro de seu pai
Acomoda pais e filhos com dimensões dinâmicas (em mudança)!

Sempre faço isso usando 2 classes: uma para especificar o elemento pai, cujo conteúdo será centralizado ( .centered-wrapper), e a segunda para especificar qual filho do pai está centrado ( .centered-content). Esta segunda classe é útil no caso em que o pai tem vários filhos, mas apenas 1 precisa ser centralizado). Nesse caso, bodyserá o .centered-wrapper, e um divserá interno .centered-content.

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

A ideia para centrar agora será fazer .centered-contentum inline-block. Isso facilitará facilmente a centralização horizontal text-align: center;e também permite a centralização vertical, como você verá.

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

Isso lhe dá 2 classes realmente reutilizáveis para centralizar qualquer filho dentro de qualquer pai! Basta adicionar as classes .centered-wrappere .centered-content.

Então, o que há com esse :beforeelemento? Isso facilita vertical-align: middle;e é necessário porque o alinhamento vertical não é relativo à altura do pai - o alinhamento vertical é relativo à altura do irmão mais alto !!! . Portanto, ao garantir que existe um irmão cuja altura é a altura do pai (100% altura, 0 largura para torná-lo invisível), sabemos que o alinhamento vertical será em relação à altura do pai.

Uma última coisa: você precisa garantir que suas tags htmle bodytenham o tamanho da janela para que centralizá-las seja o mesmo que centralizar no navegador!

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

Fiddle: 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

Eu uso o flexbox ligado html. Para um efeito agradável, você pode combinar o cromo do navegador de modo a enquadrar seu conteúdo em tamanhos de tela maiores que o máximo da página. Acho que #eeeeeecombina muito bem. Você pode adicionar uma sombra de caixa para um bom efeito de flutuação.

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

imagem / dados cortesia StatCounter

Question 8

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

Apenas aplique este estilo antes de aplicar qualquer CSS. Você pode alterar a largura de acordo com sua necessidade.

Question 9

Apenas escreva

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

Question 10

Tente isto

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

Answer 1

91

Como faço para alinhar todo o corpo html ao centro?

html css Rajat Gupta
fonte

4

Horizontal, vertical ou ambos?

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

Answer 2

4

Horizontal, vertical ou ambos?

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

Answer 3

Acabei de topar com esta postagem antiga e, embora tenha certeza de que user01 já encontrou a resposta há muito tempo, descobri que as respostas atuais não funcionam muito bem. Depois de brincar um pouco usando as informações fornecidas pelos outros, encontrei uma solução que funcionava no IE, Firefox e Chrome. Em CSS:

html, body {
    height: 100%;
}

html {
    display: table;
    margin: auto;
}

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

Isso é quase idêntico à resposta de abernier, mas descobri que incluir a largura quebraria a centralização, assim como omitiria a margem automática. Espero que qualquer outra pessoa que tropeçar neste tópico considere minha resposta útil.

Observação: omita html, body { height: 100%; }centralizar apenas horizontalmente.

Answer 4

Boa resposta. Só estou pensando (como não tenho muita experiência com HTML), é necessário definir a altura para 100%?

pôr do sol 8

Answer 5

7

@JackHumphries A altura só é necessária se você quiser alinhar o centro da página nos eixos vertical e horizontal. Se horizontal for tudo o que você deseja, omita a altura.

MildWolfie

Answer 6

36

Podes tentar:

body{ margin:0 auto; }

Arniotaki
fonte

1

Esta é uma resposta tão simples, mas a maneira mais limpa e eficiente de centralizar a tag do corpo no meio da página.

justinhartman

1

Embora seja curto, também não funciona no IE, Edge Legacy, Edge, Chrome ou Firefox. O problema é que a margem automática só funciona quando a largura do elemento é menor que a do pai. Como o padrão de 'corpo' é 100%, não há espaço nas bordas para inserir margens automaticamente. Você pode usar body { margin:0 auto; max-width: 700px; }e, em seguida, seu corpo terá até 700px e permitirá acondicionamento em dispositivos menores.

user3347790

Answer 7

1

Esta é uma resposta tão simples, mas a maneira mais limpa e eficiente de centralizar a tag do corpo no meio da página.

justinhartman

Answer 8

1

Embora seja curto, também não funciona no IE, Edge Legacy, Edge, Chrome ou Firefox. O problema é que a margem automática só funciona quando a largura do elemento é menor que a do pai. Como o padrão de 'corpo' é 100%, não há espaço nas bordas para inserir margens automaticamente. Você pode usar body { margin:0 auto; max-width: 700px; }e, em seguida, seu corpo terá até 700px e permitirá acondicionamento em dispositivos menores.

user3347790

Answer 9

16

EDITAR

A partir de hoje com o flexbox, você poderia

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

RESPOSTA ANTERIOR

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

abernier
fonte

1

Qual DOCTYPE permite o styleatributo da htmlentidade?

ceving

1

@ceving: não tenho certeza de entender ... significa que não é CSS válido?

abernier

Answer 10

1

Qual DOCTYPE permite o styleatributo da htmlentidade?

ceving

Answer 11

1

@ceving: não tenho certeza de entender ... significa que não é CSS válido?

abernier

Answer 12

Se eu tenho uma coisa que adoro compartilhar com relação ao CSS, é MINHA MANEIRA FAVE DE CENTRAR AS COISAS EM AMBOS OS EIXOS !!!

Vantagens deste método :

Compatibilidade total com navegadores que as pessoas realmente usam
Nenhuma mesa necessária
Altamente reutilizável para centralizar qualquer outro elemento dentro de seu pai
Acomoda pais e filhos com dimensões dinâmicas (em mudança)!

Sempre faço isso usando 2 classes: uma para especificar o elemento pai, cujo conteúdo será centralizado ( .centered-wrapper), e a segunda para especificar qual filho do pai está centrado ( .centered-content). Esta segunda classe é útil no caso em que o pai tem vários filhos, mas apenas 1 precisa ser centralizado). Nesse caso, bodyserá o .centered-wrapper, e um divserá interno .centered-content.

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

A ideia para centrar agora será fazer .centered-contentum inline-block. Isso facilitará facilmente a centralização horizontal text-align: center;e também permite a centralização vertical, como você verá.

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

Isso lhe dá 2 classes realmente reutilizáveis para centralizar qualquer filho dentro de qualquer pai! Basta adicionar as classes .centered-wrappere .centered-content.

Então, o que há com esse :beforeelemento? Isso facilita vertical-align: middle;e é necessário porque o alinhamento vertical não é relativo à altura do pai - o alinhamento vertical é relativo à altura do irmão mais alto !!! . Portanto, ao garantir que existe um irmão cuja altura é a altura do pai (100% altura, 0 largura para torná-lo invisível), sabemos que o alinhamento vertical será em relação à altura do pai.

Uma última coisa: você precisa garantir que suas tags htmle bodytenham o tamanho da janela para que centralizá-las seja o mesmo que centralizar no navegador!

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

Fiddle: 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
fonte

qual é o propósito de 0pxno final, ao invés de auto?

Don Cheadle

Answer 14

qual é o propósito de 0pxno final, ao invés de auto?

Don Cheadle

Answer 15

Eu uso o flexbox ligado html. Para um efeito agradável, você pode combinar o cromo do navegador de modo a enquadrar seu conteúdo em tamanhos de tela maiores que o máximo da página. Acho que #eeeeeecombina muito bem. Você pode adicionar uma sombra de caixa para um bom efeito de flutuação.

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

imagem / dados cortesia StatCounter

Answer 16

4

Boa resposta moderna. Apenas alguns comentários. (a) O prefixo do fornecedor para box-shadowé provavelmente redundante, pois os navegadores que flextambém oferecem suporte box-shadow. (b) Há muito CSS que embeleza sua resposta, mas torna as partes importantes difíceis de distinguir. Obrigado

Manngo

Answer 17

Muito (b), no comentário de @Manngo acima.

cjauvin

Answer 18

Boa resposta. Moderno. Mas poderia ter sido mais simples com o mesmo conteúdo.

carloswm85

Answer 19

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

Apenas aplique este estilo antes de aplicar qualquer CSS. Você pode alterar a largura de acordo com sua necessidade.

Answer 20

3

Apenas escreva

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

icyNerd
fonte

1

Maneira mais fácil e simples de fazer isso.

Shaeed 01 de

1

A tag central foi descontinuada: stackoverflow.com/questions/1798817/…

kyczawon

Answer 21

1