如何将按钮定位在图像顶部居中

Question

我一直在尝试制作一个像 这样 的简单网站。该按钮永远不会按预期显示。我想要 #play_button 准确显示在背景中的播放按钮图像上。怎么做到呢？

我的 CSS 代码：

 body {
     background: url('http://oi44.tinypic.com/33tjudk.jpg') no-repeat center center fixed;
     background-size:cover;  /*For covering full page*/
}

#play_button {
    position:relative;
    transition: .5s ease;
    top: 191px;
    left: 420px;
    right: -420px;
    bottom: -191px;
}
#play_button:hover {
    -webkit-transform: scale(1.05);/*Grows in size like Angry Birds button*/
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
}

还有一件事，发生的问题是，如果我调整浏览器窗口的大小，图像就会移动到一个新位置。

更新：

问题解决了:) 在这里，在这个例子 中，你可以看到按钮如何保持在页面的中心，即使你调整浏览器窗口的大小。一如既往，你可以调整 left 和 top 抵消得到想要的结果。 这是代码。

原文由 Gaurang Tandon 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

所以，这里的技巧是使用绝对定位 calc 像这样：

 top: calc(50% - XYpx);
left: calc(50% - XYpx);

其中 XYpx 是图像大小的一半，在我的例子中，图像是一个正方形。当然，在这种现在已经过时的情况下，图像还必须按比例更改其大小以响应窗口大小的调整，以便能够保持在中心而不会看起来不成比例。

原文由 Gaurang Tandon 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

尝试使用绝对定位，而不是相对定位

这应该让你接近 - 你可以通过调整边距或顶部/左侧位置进行调整

#play_button {
    position:absolute;
    transition: .5s ease;
    top: 50%;
    left: 50%;
}

http://jsfiddle.net/rolfsf/9pNqS/

原文由 rolfsf 发布，翻译遵循 CC BY-SA 3.0 许可协议