フレックスボックス垂直アライメントが動作しない

Question

今、私のdiv contentは水平方向にのみセンタリングされていますが、垂直方向にもアライメントすることを目指しています。 MacとiOSのSafariとAndroidのChromeでテストしました。

ここに私のCSSがあります。

html, body { 
    height: 100%; 
} 
body { 
    background: #002560; 
    background: linear-gradient(to bottom right, #002560, #0c182b); 
    margin: 0; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    font-family: 'Lato', sans-serif; 
    color: white; 
} 

私のHTMLはこのように見えます。ここで

<div style="display:flex;align-items:center;justify-content:center;" id="content"> 
    <div> 
     <h1>I'd love to be centre aligned correctly.</h1> 
    </div> 
</div> 

は、私はiOSの（および他のプラットフォーム）上で見ているものです。

Answer 1

あなたは#contentのdivにheightを追加するのを忘れ。以下の更新スニペットをチェック...

html, body { 
 
    height: 100%; 
 
} 
 
body { 
 
    background: #002560; 
 
    background: linear-gradient(to bottom right, #002560, #0c182b); 
 
    margin: 0; 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    font-family: 'Lato', sans-serif; 
 
    color: white; 
 
} 
 
#content { 
 
    height: 100%; 
 
    width: 100%; 
 
    text-align: center; 
 
}

<div style="display:flex;align-items:center;justify-content:center;" id="content"> 
 
    <div> 
 
     <h1>I'd love to be centre aligned correctly.</h1> 
 
    </div> 
 
</div>

Answer 2

たぶん、あなたは高さを追加することができます。そして、しばしばCSSにすべてのスタイルを持たせる方が簡単です。

html, body { 
 
    height:100%; 
 
} 
 

 
.height-100 { 
 
    height: 100%; 
 
} 
 

 
.center { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
body { 
 
    background: #002560; 
 
    background: linear-gradient(to bottom right, #002560, #0c182b); 
 
    margin: 0; 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    font-family: 'Lato', sans-serif; 
 
    color: white; 
 
} 
 

 

<div class="height-100 center" id="content"> 
 
    <div> 
 
     <h1>I'd love to be centre aligned correctly.</h1> 
 
    </div> 
 
</div>

Answer 3

あなたは

html, body { 
 
    height: 100%; 
 
} 
 
body { 
 
    background: #002560; 
 
    background: linear-gradient(to bottom right, #002560, #0c182b); 
 
    margin: 0; 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    font-family: 'Lato', sans-serif; 
 
    color: white; 
 
}

<div style="display:flex;align-items:center;justify-content:center;height:500px;width:100%;" id="content"> 
 
    <div> 
 
     <h1>I'd love to be centre aligned correctly.</h1> 
 
    </div> 
 
</div>

Answer 4

センタリングは、フレックスコンテナの計算高さを使用して適用される高さに設定する必要があります。この場合は、明示的に設定する必要があります（デフォルトでは、テイクコンテンツの高さが設定されています）。

また、bodyはフレックスコンテナとすることができます。だからあなたは余分なdivラッパーを取り除くことができます。あなたのdiv要素のために100％に高さを設定する必要があり

body { 
 
    background: #002560; 
 
    background: linear-gradient(to bottom right, #002560, #0c182b); 
 
    margin: 0; 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    font-family: 'Lato', sans-serif; 
 
    color: white; 
 
    
 
    height: 100vh; 
 
    display: flex; 
 
    
 
    /* Also you can apply this for common body layout */ 
 
    flex-direction: column; 
 
    align-items: center; 
 
    justify-content: center; 
 
}

<h1>I'd love to be centre aligned correctly.</h1>