html - 调整大小时保持文本居中

Question

所以我看了其他类似的问题，但没有一个能解决我的问题。我希望能够做的是调整浏览器窗口的大小，同时将文本保持在窗口的中央。

HTML:

<div id=inside>
Navjeeven Mann
</div>

CSS:

#inside {
  position:relative;
  width: 100%;
  height: 100%;
  font-size: 60px;
  text-align: center;
  color: black;
  top:50%;
  left:50%;
}

What it looks like now

Answer 1

要使其水平居中，请移除 top:50%;left:50%;

#inside {
  position:relative;
  width: 100%;
  height: 100%;
  font-size: 60px;
  text-align: center;
  color: black;
}

<div id="inside">
  Navjeeven Mann
</div>

要使其水平和垂直居中，flex 确实可以很好地完成这项工作，除非您必须支持较旧的浏览器。

html, body {
  margin: 0;
}

#inside {
  display: flex;
  width: 100vw;
  height: 100vh;
  align-items: center;
  justify-content: center;
  font-size: 60px;
}

<div id="inside">
  Navjeeven Mann
</div>