Como colocar o corpo numa página?

Estou a tentar centrar o elemento corporal na minha página HTML.

enter image description here

basicamente, no CSS eu defini o elemento do corpo como display: inline-block; de modo que ele é tão largo quanto o seu conteúdo. Isso funciona bem. No entanto, margin: 0px auto; não o centra na página.

Alguém sabe como resolver isto? Eu quero que o grande quadrado azul seja centrado na página, não flutuando para a esquerda como é agora.

Aqui está o meu CSS.
body {
    display: inline-block;
    margin: 0px auto;
    text-align: center;
}
Author: Ryan Peschel, 2012-06-03

4 answers

Aplicar Também texto-alinhar: center; no elemento html como assim:

html {
  text-align: center;
}
Uma melhor abordagem, porém, é ter um recipiente interior div, que será centralizado, e não o corpo.
 26
Author: Madara Uchiha, 2015-12-09 19:11:43
    body
    {
        width:80%;
        margin-left:auto;
        margin-right:auto;
    }
Isto vai funcionar na maioria dos navegadores, incluindo o IE.
 29
Author: Freakishly, 2012-09-20 23:38:21

Você tem que especificar a largura do corpo para que ele se centre na página.

Ou colocar todo o conteúdo no div e centrá-lo.

<body>
    <div>
    jhfgdfjh
    </div>
</body>​

div {
    margin: 0px auto;
    width:400px;
}

 9
Author: SRN, 2012-11-25 08:50:17

Para aqueles que sabem a largura, podem fazer algo como

div {
     max-width: ???px; //px,%
     margin-left:auto;
     margin-right:auto;
}

Também concordo em não definir texto-alinhar: centro no corpo porque ele pode estragar o resto do seu código e você pode ter que definir individualmente texto-alinhar:Esquerda em um monte de coisas, então ou no futuro.

 3
Author: DardanM, 2015-05-26 20:04:20