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

Как выровнять весь html-объект с центром?

Ответ 1

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

html, body {
    height: 100%;
}

html {
    display: table;
    margin: auto;
}

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

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

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

Ответ 2

Вы можете попробовать:

body{ margin:0 auto; }

Ответ 3

EDIT

На сегодняшний день с 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;}

Ответ 4

Если у меня есть одна вещь, которую я люблю делиться с CSS, она МОЙ ФАВАННЫЙ ПУТЬ ЦЕНТРАЛЬНОГО ИСПОЛЬЗОВАНИЯ В ТЕЧЕНИЯХ НА ОСНОВЕ ОБОИХ ЛИЦ!!!

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

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

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

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

Идея центрирования теперь состоит в том, чтобы сделать .centered-content an inline-block. Это позволит легко облегчить горизонтальное центрирование, text-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;
}

Fiddle: https://jsfiddle.net/gershy/g121g72a/

Ответ 5

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

Ответ 6

Я использую flexbox на html. Для приятного эффекта вы можете подобрать браузер Chrome так, чтобы ваш контент отображался на экране размером больше, чем ваш максимальный размер страницы. Я считаю, что #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

Ответ 7

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

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