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