如何设置图像相对于屏幕中心的绝对位置答案

【问题标题】：how to set absolute position of images relative to screen center如何设置图像相对于屏幕中心的绝对位置
【发布时间】：2014-10-06 03:35:30
【问题描述】：

我尝试为我的网站设置一个简单的登录页面，只有 5 张图片，以五边形的形式排列。（图像将在每个五边形边缘）。所以不是一行或一行中的 5 个图像，而是一个“圆圈”中的 5 个图像。

我能够在响应式布局中将图像设置在我想要的位置，它们在较小的屏幕上调整大小，甚至图像的位置也是响应式的。

但问题就从这里开始了。图片的位置是相对于屏幕边框设置的

position: absolute; top: 50% left: 25%

对于第一个图像，以此类推其他 4 个图像，以使它们位于五边形的五个边缘的位置

当调整浏览器窗口的大小时，从一个图像到另一个图像的距离会发生变化，这当然是因为位置是相对于窗口边框设置的。

并且图像的顺序当然会中断，直到它们看起来彼此远离或彼此接近。

有没有办法将图像位置设置为相对于屏幕上预设点的绝对位置，例如屏幕的绝对中心？

这五个图像应该是响应式的，但是图像的顺序和它们之间的距离应该始终保持相同的关系！（为了将图像保持在一个圆圈中，或者在五边形的五个边缘处以其他方式表示）

现在我使用以下内联样式的代码，在 980*1280 像素的屏幕上看起来很棒，但在更小或更大的屏幕上，图像的位置不再是所需的“五边形”顺序：

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            body{
                background-color: #000;
            }

            .overlay1 {
                width: 10%;
                position: absolute;
                top: 50%;
                left:25%;
                -webkit-transform: translate(-50%, -50%);
                -moz-transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                -o-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
            }

            .overlay2 {
                width: 10%;
                position: absolute;
                top: 25%;
                left: 50%;
                -webkit-transform: translate(-50%, -50%);
                -moz-transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                -o-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
            }

            .overlay3 {
                width: 10%;
                position: absolute;
                top: 50%;
                left: 75%;
                -webkit-transform: translate(-50%, -50%);
                -moz-transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                -o-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
            }

            .overlay4 {
                width: 10%;
                position: absolute;
                top: 75%;
                left: 37.5%;
                -webkit-transform: translate(-50%, -50%);
                -moz-transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                -o-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
            }

            .overlay5 {
                width: 10%;
                position: absolute;
                top: 75%;
                left: 62.5%;
                -webkit-transform: translate(-50%, -50%);
                -moz-transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                -o-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
            }
        </style>
    </head>
    <body>
        <img src="site.com/content/uploads/2014/08/site-logo-vector- 280x280.png" class="overlay1" />
        <img src="site.com/content/uploads/2014/08/site-logo-vector-280x280.png" class="overlay2" />
        <img src="site.com/content/uploads/2014/08/site-logo-vector-280x280.png" class="overlay3" />
        <img src="site.com/content/uploads/2014/08/site-logo-vector-280x280.png" class="overlay4" />
        <img src="site.com/content/uploads/2014/08/site-logo-vector-280x280.png" class="overlay5" />
    </body>
</html>

更新更新更新：

我编辑了以下代码（将 HTML 更改如下）：

    <div class="container">
    <img src="site.com/content/uploads/2014/08/site-logo-vector-280x280.png" class="ri" />
    <img src="site.com/content/uploads/2014/08/site-logo-vector-280x280.png" class="ri ri1" />
    <img src="site.com/uploads/2014/08/site-logo-vector-280x280.png" class="ri ri2" />
    <img src="site.com/uploads/2014/08/site-logo-vector-280x280.png" class="ri ri3" />
    <img src="site.com/content/uploads/2014/08/site-logo-vector-280x280.png" class="ri ri4" />
    </div>

（改CSS如下）：

    .container{
    height: 100vh;
    max-width: 100vh;
    border: 1px red solid;
    position: absolute;
    top: 0%;
    left: 0%;
    }

    img.ri
    {
    position: relative;
    max-width: 25%;
    }
    img.ri:empty
    {
    top: 23%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    }
    img.ri1:empty
    {
    top: 50%;
    left: -5%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    }
    img.ri2:empty
    {
    top: 50%;
    left: 25%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    }
    img.ri3:empty
    {
    top: 60%;
    left: 30%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    }
    img.ri4:empty
    {
    top: 60%;
    left: 40%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    }

现在一切都很好，但我希望容器始终显示在视口的中心（仅宽度）

     (position: absolute; left:50%; )

我的 image.ri:empty 显然不适用于 .container（仅适用于没有子元素的元素！！！！！！）

有人知道如何将其居中吗？

     position: absolute; left:50vw;

也不行。

问题很明显：

“注意选择器：img.ri:empty — empty 是一个结构伪类，它只匹配没有子元素的元素（图像永远不应该有任何子元素）。这是一个 CSS3 选择器，因此 IE8 及以下版本将不解析声明。我们可以使用替代方法，例如条件注释，但这似乎是一种更有效的解决方案，并且只需要六个额外的字符。”

那么如何将 CONTAINER 设置为屏幕宽度的真实中心？

【问题讨论】：

标签： css image responsive-design css-position

【解决方案1】：

我有解决办法：:)

不管怎样，发生了一些真正令人困惑的事情：

这是（我猜）更简洁的代码版本，：

fiddle example

     #outer {
     position: relative;
     }
     #inner {
     margin: auto;  
     position: absolute;
     left:0;
     right: 0;
     top: 0;
     bottom: 0;
     }
     .parent{
height: 100vh;
max-width: 100vw;
border: 1px black solid;
position: absolute;
top: 0%;
left: 0%;
}
   .container{
height: 100vh;
max-width: 100vh;
border: 1px red solid;
position: relative;
top: 0%;
left: 35%;
}

img.ri
{
position: relative;
max-width: 25%;
}
img.ri:empty
{
top: 23%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
img.ri1:empty
{
top: 50%;
left: -5%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
img.ri2:empty
{
top: 50%;
left: 25%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
img.ri3:empty
{
top: 60%;
left: 30%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
img.ri4:empty
{
top: 60%;
left: 40%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
     <div class="parent" id="outer">
     <div class="container" id="inner">
     <img src="http://www.example.com/content/uploads/2014/08/example-logo-vector-280x280.png" class="ri" />
     <img src="http://www.example.com/content/uploads/2014/08/example-logo-vector-280x280.png" class="ri ri1" />
     <img src="http://www.example.com/content/uploads/2014/08/example-logo-vector-280x280.png" class="ri ri2" />
     <img src="http://www.example.com/content/uploads/2014/08/example-logo-vector-280x280.png" class="ri ri3" />
     <img src="http://www.example.com/content/uploads/2014/08/example-logo-vector-280x280.png" class="ri ri4" />
    </div>
    </div>

不管怎样，看看这个！！！（在同一个小提琴示例中，只需修改代码如下：）删除整个#outer html和css，并在css的第12行添加一个“}”符号，你会得到相同的结果，只有外边框被删除......

这是为什么？？？？这对我来说几乎是不可能的，因为这是一个额外的“}”符号，应该会破坏代码还是我错了？？？

感谢您的帮助！

我希望我的解决方案可以帮助未来的求职者:)

【讨论】：

【解决方案2】：

您可以尝试在 div 内设置图像并为该 div 赋予静态宽度，以便在调整屏幕大小时图像的相对位置保持不变（基本上使 div 无响应）

编辑：尝试查看 this 并告诉我您是否正在寻找 :) 我所做的是，我创建了一个包装 <div class="container"> 并赋予它以下属性：

.container {
    border: 1px red solid;
    position: relative;    
    width: 100%;
    height: 0;
    padding-bottom: 100%;
}

然后我为每个图像添加了以下类，以及您拥有的 .overlay# 类（删除了一些部分）：

.picture {
    width: 10%;
    position: absolute;
    display: inline;
}

参考：this SO post的第二个回答

编辑#2：下面是我的评论示例：

<div class="container">
    <div class="adjusted">
        // images, same as above
    </div>
</div>

还有额外的 CSS：

.container {
    /* same as above, plus the following line */
    top: 50%;
}

.adjusted {
    top: -100px; /* <--this would be half the height of your pentagon */
}

编辑#3：我想我明白了！有两个嵌套的<div> 容器，可能还有几行额外的样式，但非常接近。我想如果你和this一起玩，那么你也许可以让它发挥作用。

祝你好运！

【讨论】：

感谢您的解决方案，我自己也已经在那里了，我不喜欢的是“五边形”仍然在移动屏幕的上半部分，这意味着五边形不会出现在屏幕的绝对中心，而只会出现在顶部中心。这就是我离开那个解决方案的方式。如果有可能将容器居中到绝对中心，这意味着在每个屏幕尺寸上都以宽度和高度为中心，请告诉我:) 再次感谢...
我唯一的其他建议是将top: 50%; 用于父<div>，然后将其向上移动五边形高度的一半（通过嵌套另一个<div>）。这可能会起作用，因为您希望图像之间的距离保持不变，这将为您提供恒定的高度。
你的方法接近了，我只是想修改如下：在较小的屏幕上将整个框移动到屏幕的中心，（绝对位置；top50%；left50%），当在更大的屏幕上时, 调整框的大小以适应屏幕高度，因此将删除滚动。（我试图使用@media 屏幕和（方向：横向））但它不起作用。有什么想法吗？

【解决方案3】：

好吧，我认为你的方法不是最好的，因为它总是有一个随机元素。我会尝试使用 JQuery responsive image maps plugin 之类的东西来获得更好的行为，但如果你对这种方法死心塌地，我会尝试这样的事情：

1) 首先，为这个元素构建一个“容器盒”。

2) 然后，在其中构建一个 5x5 方形网格（您需要使用 Jquery 来检测宽度或使用 CSS 的绝对宽度）。这些 div 具有相同的宽度和高度非常重要，即使是空的也是如此。

3) 将所有图像宽度设为 100%。在此之后，像这样放置图像：第一张图片：第一行第三列第 2 和第 3 图像：第 1 和第 5 列，第 3 行第 4 和第 5 张图片：第 2 和第 4 列，第 5 行。

这将起作用。它将是 100% 响应的。但老实说，我不认为它看起来不错，所以我鼓励你要么使用 JQuery 路径，要么采用响应式模型，如果你的手机没有五边形，那就这样吧。当然，取决于你的需求和品味

【讨论】：

感谢您的想法，我查看了这个 JQuery 响应式图像地图插件，看起来它确实做得很酷，看他们放的图片作为示例...我实际上没有了解它是如何工作的，并查看他们作为示例的图像代码，我很害怕......很多编码:) 我是一个该死的初学者......但你是对的。好看的东西需要好看的代码:)
好吧，然后使用其他代码，它是简单的 html 并且是防弹的，我只是认为它在像移动设备这样非常小的尺寸上看起来不太好
这种方法会很好，但五边形的几何形状不正确，不幸的是，因为五边形的边缘不能准确地拱起 5 个正方形网格中的位置。因为没有办法用不同大小的盒子制作一个 5 方格，这对我没有用，但无论如何，谢谢你的快速想法和帮助:-)