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

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

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

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

Вот мой CSS:

body {
    display: inline-block;
    margin: 0px auto;
    text-align: center;
}
Источник

5 ответов

Решение

Также примените выравнивание текста: центр; на элемент HTML, например, так:

html {
  text-align: center;
}

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

Источник 
    body
    {
        width:80%;
        margin-left:auto;
        margin-right:auto;
    }

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

Источник

Вы должны указать ширину тела для его центрирования на странице.

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

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

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

Источник

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

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

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

Источник

Использование гибкого макета — еще один вариант. Добавьте в свой CSS:

      html {
    display: flex;
    justify-content: center;
}

Протестировано в Chrome, Edge, Firefox.

Дополнительную информацию можно найти в ссылках на MDN и множестве онлайн-руководств (это кажется удобным, поскольку оно организовано вокруг ролей контейнера/элемента в гибком макете).

Источник
Другие вопросы по тегам