Центрирующий текст испортил мой заголовок

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

Я сделал 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:

Для того, чтобы исправить то, что он хотел сделать, я использовал flex -свойство для Allign элементов в середине header, как это:

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

Answer 2

Пустое пространство имеет не имеет ничего общего с центрированием текста. Это комбинация значения по умолчанию margin-top, которое применяется к абзацам и collapsing margins.

Добавить margin-top: 0 в правила для #hello.

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