Как центрировать тело на странице?

Я пытаюсь центрировать элемент body на моей странице HTML.

В принципе, в CSS я устанавливаю элемент body display: inline-block; таким образом, чтобы он был только таким же широким, как и его содержимое. Это прекрасно работает. Однако margin: 0px auto; не центрирует его на странице.

Кто-нибудь знает, как это исправить? Я хочу, чтобы большой синий квадрат был сосредоточен на странице, а не плавал влево, как сейчас.

Вот мой CSS:

body {
    display: inline-block;
    margin: 0px auto;
    text-align: center;
}

Ответы

Ответ 1

Также примените text-align: center; на элемент html, например:

html {
  text-align: center;
}

Лучший подход состоит в том, чтобы иметь внутренний контейнер div, который будет централизован, а не тело.

Ответ 2

    body
    {
        width:80%;
        margin-left:auto;
        margin-right:auto;
    }

Это будет работать в большинстве браузеров, включая IE.

Ответ 3

Вы должны указать ширину тела, чтобы она была на центральной странице.

Или поместите весь контент в div и центрируйте его.

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

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

Ответ 4

Для тех, кто do знает ширину, вы можете сделать что-то вроде

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

Я также соглашаюсь не устанавливать text-align: center на теле, потому что это может испортить остальную часть вашего кода, и вам, возможно, придется индивидуально установить text-align: left по многим вещам либо тогда, либо в будущем.