如何使隐藏/可见元素居中，使其始终显示在屏幕中间？答案

【问题标题】：How to center an hidden/visible element so it always shows up in the middle of the screen?如何使隐藏/可见元素居中，使其始终显示在屏幕中间？
【发布时间】：2022-06-15 00:49:58
【问题描述】：

图像可以通过按钮显示和隐藏。如何设置图像样式，使其始终显示在用户屏幕的中间。我的职位是：absoulte;！

【问题讨论】：

你能展示你的代码吗？
屏幕中间 => position: fixed. position: absolute 会将其对齐到下一个相对元素，默认情况下将是主体。只要身体高度不完全是 100vh，您就无法以这种方式将其与屏幕中心对齐。
该图像是一种背景图像，还是位于屏幕上其他内容的前面？

标签： javascript html css

【解决方案1】：

如果我理解正确，您想以position: absolute 居中元素。

您可以这样做：

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

【讨论】：

这会将元素对齐到下一个相对父级的中心，这不一定是屏幕（视口）。