HTMLボディ全体を中央に揃える方法は？

Question 1

HTMLボディ全体を中央に揃えるにはどうすればよいですか？

Question 2

私はこの古い投稿を偶然見つけました。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%; }水平方向の中央のみを省略します。

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に関して私が共有したいことが1つある場合、それは私の両方の軸に沿って物事を集中させる私のお気に入りの方法です!!!

この方法の利点：

人々が実際に使用するブラウザーとの完全な互換性
テーブルは不要
親の中で他の要素を中央に配置するための再利用性が高い
動的な（変化する）寸法で親子に対応！

私は常に2つのクラスを使用してこれを行います。1つはコンテンツが中央に配置される親要素を指定し（.centered-wrapper）、もう1つは親のどの子を中央に配置するかを指定します（.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すること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;
}

フィドル：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;
}