Как выровнять все тело 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;
}

Answer 1

93

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

html css Раджат Гупта
источник

4

Горизонтально, вертикально или и то, и другое?

Ciro Santilli 郝海东冠状病六四事件法轮功

Answer 2

4

Горизонтально, вертикально или и то, и другое?

Ciro Santilli 郝海东冠状病六四事件法轮功

Answer 3

Я только что наткнулся на этот старый пост, и хотя я уверен, что 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%; }только по горизонтали.

Answer 4

Хороший ответ. Просто интересно (поскольку у меня нет большого опыта работы с HTML), необходимо ли устанавливать высоту на 100%?

закат 8

Answer 5

7

@JackHumphries Высота необходима только в том случае, если вы хотите выровнять центр страницы как по вертикальной, так и по горизонтальной оси. Если горизонтальное - это все, что вам нужно, вы можете не указывать высоту.

MildWolfie

Answer 6

36

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

body{ margin:0 auto; }

арниотаки
источник

1

Это такой простой ответ, но при этом самый чистый и эффективный способ центрировать тег body в середине страницы.

Justinhartman

1

Хотя он и короткий, он также не работает в IE, Edge Legacy, Edge, Chrome или Firefox. Проблема в том, что margin auto работает только тогда, когда ширина элемента меньше ширины родительского элемента. Поскольку для параметра body по умолчанию установлено значение 100%, по краям нет места для автоматической вставки полей. Вы можете использовать, body { margin:0 auto; max-width: 700px; }и тогда ваше тело будет до 700 пикселей и позволит обертывать на небольших устройствах.

user3347790

Answer 7

1

Это такой простой ответ, но при этом самый чистый и эффективный способ центрировать тег body в середине страницы.

Justinhartman

Answer 8

1

Хотя он и короткий, он также не работает в IE, Edge Legacy, Edge, Chrome или Firefox. Проблема в том, что margin auto работает только тогда, когда ширина элемента меньше ширины родительского элемента. Поскольку для параметра body по умолчанию установлено значение 100%, по краям нет места для автоматической вставки полей. Вы можете использовать, body { margin:0 auto; max-width: 700px; }и тогда ваше тело будет до 700 пикселей и позволит обертывать на небольших устройствах.

user3347790

Answer 9

17

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

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

абернье
источник

1

Какой DOCTYPE позволяет использовать styleатрибут htmlобъекта?

ceven

1

@ceving: не уверен, что понял ... значит, это недействительный CSS?

Абернье,

Answer 10

1

Какой DOCTYPE позволяет использовать styleатрибут htmlобъекта?

ceven

Answer 11

1

@ceving: не уверен, что понял ... значит, это недействительный CSS?

Абернье,

Answer 12

Если у меня есть что-то, чем я люблю делиться относительно 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/

Answer 13

8

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

янтимон
источник

какова цель 0pxв конце, а не auto?

Дон Чидл

Answer 14

какова цель 0pxв конце, а не auto?

Дон Чидл

Answer 15

Я использую 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

Answer 16

4

Хороший современный ответ. Всего несколько комментариев. (a) Префикс vendor-prefix для box-shadowвероятно избыточен, поскольку браузеры flexтакже поддерживают box-shadow. (б) Есть много CSS, который украшает ваш ответ, но затрудняет различение важных частей. Спасибо

Manngo 06

Answer 17

Очень много (b), в комментарии @ Manngo выше.

cjauvin

Answer 18

Хороший ответ. Современное. Но могло быть и попроще с тем же содержанием.

carloswm85 05

Answer 19

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

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

Answer 20

4

Просто пиши

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

ледяной ботаник
источник

2

Самый простой и легкий способ это сделать.

Шаид

2

Центральный тег устарел: stackoverflow.com/questions/1798817/…

kyczawon

Answer 21

2

Самый простой и легкий способ это сделать.

Шаид

Answer 22

2

Центральный тег устарел: stackoverflow.com/questions/1798817/…

kyczawon

Answer 23

0

Попробуй это

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

Риккардо Зонта
источник

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

Ответы: