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>

Answer 2

看起来您希望文本在div内垂直和水平居中。我首先将你的文本包装在一个p标签内。然后稍微更改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>

这应适用于所有设备

调整大小时保持文本居中

2 个答案: