CSSテキスト整列センターは、垂直

Question

重要な中心地はありません：

私のポストは、（通常は）重複していません。私は、スタックオーバーフローのポスト（そして多分すべての重複があります）を発見しましたthis,this、thisとthis。私はこの記事のもっとも一般的な答えを試していますが、うまくいきません。私は他の方法も試しましたが、目標を達成できません。

html, body { 
 
    height: 100%; 
 
} 
 

 
#dimScreen { 
 
    width: 100%; 
 
    height: 100%; 
 
    background:rgba(0,0,0,0.5); 
 
} 
 

 
h1 { 
 
    font-size:350%; 
 
}

<div id="dimScreen" style="text-align: center; vertical-align: center; display:inline-block;"> 
 
    <h1 >Big text</h1> 
 
</div>

私の問題は、私は中央（縦+横方向）にテキストを置くことができますどのように私は理解できないということです。

だから、私はテキストで大きなdiv要素を持っています私の灰色のdivの。ご覧のように、テキストはdivの中央（水平方向）に表示されますが、垂直方向の中央には表示されません。体の部分に中心（垂直+水平）を設定します。

私の例では、これらの投稿のうち最も一般的な回答に垂直にテキストを並べるよう試みますが、動作しません。私は既に他の方法を試しました。リンクされた質問で見つけることができますが、うまくいきません。私たちはいつも同じ結果を持っています。

私はすべてのページに自分の（灰色の）divを表示するので、私はこの問題があると思います。私は通常のdivを試して、コードが動作します：私のテキストは垂直に中心です。

短い質問：私は縦にグレーのdivの私のテキストを中央揃えするにはどうすればよい

？

ご質問がありましたら教えてください。

スフィンクス。

Answer 1

あなたはdivの中垂直方向に中央

html, body { 
 
    height: 100%; 
 
} 
 

 
#dimScreen { 
 
    width: 100%; 
 
    height: 100%; 
 
    background:rgba(0,0,0,0.5); 
 
    text-align:center; 
 
    display:flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
h1 { 
 
    font-size:350%; 
 
}

<div id="dimScreen"> 
 
    <h1 >Big text</h1> 
 
</div>

Answer 2

テキストを設定することができますFlexboxを使用また、古いブラウザを含めるようにtable-layoutを使用することができます。

html, 
 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
body { 
 
    margin: 0; 
 
    display: table 
 
} 
 

 
#dimScreen { 
 
    background: rgba(0, 0, 0, 0.5); 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
} 
 

 
h1 { 
 
    font-size: 350%; 
 
}

<div id="dimScreen" style=""> 
 
    <h1>Big text</h1> 
 
</div>

注：vertical-align:center;は有効な値ではありません。おそらくmiddleが欲しかったでしょう。