Как выровнять все тело html по центру?

Question 1

Question 2

Я только что наткнулся на этот старый пост, и хотя я уверен, что user01 давно нашел свой ответ, я обнаружил, что текущие ответы не совсем работают. Немного поигравшись с информацией, предоставленной другими, я нашел решение, которое работало в IE, Firefox и Chrome. В CSS:

html, body {
    height: 100%;
}

html {
    display: table;
    margin: auto;
}

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

Это почти идентично ответу Абернье, но я обнаружил, что включение ширины нарушит центрирование, как и исключение автоматического поля. Я надеюсь, что любой, кто наткнется на эту тему, найдет мой ответ полезным.

Примечание. Не центрируйте html, body { height: 100%; }только по горизонтали.

Question 3

Можешь попробовать:

body{ margin:0 auto; }

Question 4

РЕДАКТИРОВАТЬ

На сегодняшний день с помощью flexbox вы могли

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

ПРЕДЫДУЩИЙ ОТВЕТ

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

Question 5

Если у меня есть что-то, чем я люблю делиться относительно CSS, так это МОЙ ЛЮБИМЫЙ СПОСОБ ЦЕНТРАНИРОВАНИЯ ВСЕГО ПО ОБЕИМ ОСИ !!!

Преимущества этого метода :

Полная совместимость с браузерами, которые люди действительно используют
Таблицы не требуются
Возможность многократного использования для центрирования любых других элементов внутри их родителя
Подходит для родителей и детей с динамическими (изменяющимися) размерами!

Я всегда делаю это, используя 2 класса: один для указания родительского элемента, содержимое которого будет центрировано ( .centered-wrapper), и второй, чтобы указать, какой дочерний элемент родительского элемента центрирован ( .centered-content). Этот второй класс полезен в случае, когда у родителя несколько дочерних элементов, но нужно центрировать только 1). В этом случае bodyбудет то .centered-wrapper, а внутреннее divбудет .centered-content.

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

Идея для центрирования теперь будет делать . Это легко упростит горизонтальное центрирование, сквозное , а также позволит центрировать по вертикали, как вы увидите..centered-contentinline-blocktext-align: center;

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

Это дает вам 2 действительно многоразовых класса для центрирования любого дочернего элемента внутри любого родителя! Просто добавьте .centered-wrapperи .centered-contentклассы.

Итак, что случилось с этим :beforeэлементом? Это облегчает vertical-align: middle;и необходимо, потому что вертикальное выравнивание не относительно высоты родителя - вертикальное выравнивание относительно высоты самого высокого родного брата !!! . Следовательно, гарантируя, что есть брат или сестра, высота которого равна высоте родителя (100% высоты, 0 ширины, чтобы сделать его невидимым), мы знаем, что вертикальное выравнивание будет относительно высоты родителя.

Одна последняя вещь: Вы должны убедиться , что ваши htmlи bodyтеги размер окна так , чтобы центровка к ним так же , как центрирование в браузере!

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

Скрипка: 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

Я использую flexbox на html. Для приятного эффекта вы можете сопоставить хром браузеров, чтобы отображать контент на экранах, размер которых превышает максимальные значения вашей страницы. Я считаю, что это #eeeeeeочень хорошо подходит. Вы можете добавить тень блока для хорошего эффекта плавания.

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

изображение / данные любезно предоставлены StatCounter

Question 8

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

Просто примените этот стиль перед применением любого CSS. Вы можете изменить ширину в соответствии с вашими потребностями.

Question 9

Просто пиши

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

Question 10

Попробуй это

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