テキストをセンタリングしているときにヘッダーがぼやけている

Question

ヘッダーにテキストを中央に配置したい場合、ヘッダーは高さの100％と幅の100％を占め、単色だけです。私がテキストを中心に置くと（Hello）、ヘッダーは空白を残して「プッシュ」され、これを修正する手がかりがありません。

#mainHeader { 
 
    background-color: #282828; 
 
    width: 100%; 
 
    height: 100vh; 
 
} 
 
#hello { 
 
    color: #f2f2f2; 
 
    font-size: 200px; 
 
    font-family: monospace; 
 
    margin-bottom: 0; 
 
    text-align: center; 
 
} 
 
#body { 
 
    margin: 0; 
 
}

<header id="mainHeader"> 
 

 
    <p id="hello"> 
 
    &ltHello&gt 
 
    </p> 
 

 
</header>

（テキストウィンドウがデフォルトでズームされたときに垂直にセンタリングされる必要がある）

Answer 1

Iはjsfiddleを作り、私はヘッダ上記ホワイトボックスを見ました。私はmargin-top: 0をCSSの#helloに追加しました。それは私にとってはうまくいくようです。それを試してみてください！

#mainHeader { 
     background-color: #282828; 
     width: 100%; 
     height: 100vh; 
    } 

#hello { 
    color: #f2f2f2; 
    font-size: 200px; 
    font-family: monospace; 
    margin-bottom: 0; 
    text-align: center; 
    margin-top: 0; 
} 

#body { 
    margin: 0; 
} 

EDIT：

#mainHeader { 
    background-color: #282828; 
    width: 100%; 
    height: 100vh; 
    display: flex; 
    justify-content: center; (vertical center) 
    align-items: center; (horizontal center) 
} 

Answer 2

ホワイトスペースがあります。彼は、私がこのようなheaderの途中でアイテムをallignするflex -propertyを使用したいと思ったものを修正するには

センタリングテキストとは関係ありません。段落に適用されるデフォルトのmargin-topとcollapsing marginsの組み合わせです。

#helloのルールにmargin-top: 0を追加します。

Answer 3

おそらくパディングトップのプロパティで遊ぶことができます！もちろん、<p>がデフォルトで追加するマージントップを削除しました...

#mainHeader { 
    background-color: #282828; 
    width: 100%; 
    height: 100vh; 
} 
#hello { 
    padding-top: 100px; 
    color: #f2f2f2; 
    font-size: 200px; 
    font-family: monospace; 
    margin: 0 auto; 
    text-align: center; 
} 
#body { 
    margin: 0; 
}