Html 居中文本弄乱了我的标题

我想在标题中居中显示文本，标题占据100%的视图高度和100%的宽度，并且只包含纯色。当我将文本居中（Hello）时，标题被“按下”，留下空白，我不知道如何解决这个问题

#主标题{
背景色:#282828 ;；
宽度：100%；
高度：100vh；
}
#你好{
颜色：#F2F2；
字体大小：200px；
字体系列：monospace；
页边距底部：0；
文本对齐：居中；
}
#身体{
保证金：0；
}

<Hello>

我做了一个手势，看到了标题上方的白色框。我在css的

#hello

中添加了一个

边距顶部：0

，它似乎对我很有用。试试看

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

编辑：

< >为了修复他想做的事情，我使用<代码> Flex 页眉<代码>的中间对齐这些项目：

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

---

空白与文本居中无关。这是适用于段落和的默认

页边距顶部的组合

将
margin-top:0
添加到
#hello
的规则中，也许您可以使用padding-top属性！当然，我已经删除了默认情况下
添加的页边空白顶部

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

你能创建一个JSFIDLE吗？如果我添加页边距top:0，文本没有垂直居中，这是我想要的。@user6395724-如果你保留它，它仍然没有垂直居中（除非用户的视口大小恰好意味着默认的页边距垂直居中内容）.是的，但是如何使文本在所有设备上垂直居中？我认为我不够清楚，但文本需要垂直居中。但是谢谢你的回答是的谢谢你谢谢斯奈斯！我用该解决方案编辑了我的答案，因此如果您想向其他人展示该解决方案，您可以将其标记为有效。谢谢，它有效！这使它在所有屏幕尺寸上都居中？太好了！如果要这样做，应该为padding top属性指定一个%（相对）值，而不是px（固定）值。。。因此，在所有屏幕尺寸上，它将“垂直对齐”相同的距离（相对于屏幕顶部或其父屏幕）。。。别忘了结束这个问题@用户