調整大小時保持文本居中

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

現在看起來像什么

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> 

Answer 2

看起來您想讓文本在div中垂直和水平居中。 我先將您的文本包裝在ap標簽中。 然后稍微改變一下css，這樣您的代碼將如下所示：

  html, body { margin: 0; } #inside { position: relative; width: 100%; height: 300px; /* change this to your liking */ border: 1px solid #000; /* to show size of div */ } #inside p { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); margin: auto; font-size: 60px; text-align: center; color: black; display: inline-block; } 

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

這應該適用於所有設備