Як вирівняти все тіло 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). Цей 2-й клас корисний у тому випадку, коли батько має декількох дітей, але лише 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. Для приємного ефекту ви можете підібрати браузер 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

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