将元素完美定位到中心（不仅仅是全屏）答案

【问题标题】：Position element perfectly to center (not just for fullscreen)将元素完美定位到中心（不仅仅是全屏）
【发布时间】：2020-06-22 16:41:59
【问题描述】：

所以，我需要将我的元素完美地定位到中心。它在全屏模式下正确显示，但是当它不在全屏模式下时，由于浏览器的顶部（选项卡、URL 栏等），元素会略微向下移动。

我正在使用这个 CSS：

.centered {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

我感觉它相对于屏幕分辨率居中？（这就解释了为什么它完全居中于全屏）。

有没有办法解决这个问题？我不介意使用 HTML/CSS/JS 来解决这个问题，我也可以使用 JavaScript 库。

感谢您的帮助！

编辑：
我的元素在体内，像这样：

<body>
   <img class="centered" src="image.png">
</body>

【问题讨论】：

非全屏模式时页面是否垂直滚动？如果是这样，那么您的 css 可能是正确的。只是高度比你在屏幕上看到的要长
我将overflow 设置为hidden，所以它不显示滚动条。但是，背景图像设置为 1920x1080，这可能是它这样做的原因。我要看看将背景大小更改为100% 是否有什么作用。
我认为这实际上不是问题所在。该元素设置为绝对，因此其他元素不应影响它。
我明白了。最好是删除overflow 并将高度设置为100vh，以便它始终准确地填充视口。那么你就不必切断任何内容的显示
@itsanenewabstract 感谢您的回复！将top 属性设置为50vh 修复了它。

【解决方案1】：

通过像这样更改代码来使用vh 单元：

.centered {
   position: absolute;
   top: 50vh;
   left: 50%;
   transform: translate(-50%, -50%);
}

【讨论】：

【解决方案2】：

您需要将父级设置为position: relative。

.parent {
   position: relative;
}
.centered {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

<div class="parent">
  <span class="centered">I am centered</span>
</div>

【讨论】：