如何在 CSS 中准确定位按钮答案

【问题标题】：How to position the Button exactly in CSS如何在 CSS 中准确定位按钮
【发布时间】：2013-09-09 12:49:33
【问题描述】：

我一直在尝试制作一个像this 这样的简单网站。但是，我现在确实意识到我不擅长 CSS 定位，因为按钮永远不会按预期显示。
正如您可能已经猜到的那样，我希望按钮 (#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);
}

更新：

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

更新：

问题已解决 :) Here, in this example，即使您调整浏览器窗口的大小，您也可以看到按钮如何保持在页面中心。与往常一样，您可以调整 left 和 top 偏移量以获得期望的结果。 Here's the code.

【问题讨论】：

请发布您的 HTML 并尽可能发布 jsFiddle.net 示例。并且索取插件、教程和工具对于 SO 来说是题外话。
@j08691 好的，很抱歉跑题了，我不知道。至于预览示例，我有一个plunker example，但我也会像你说的那样上传一个 jsfiddle。并添加 HTML 代码，只需一分钟。
使用绝对定位
好的，谢谢我得到了答案。感谢大家的帮助。
如果您的解决方案与已经提供的答案不同，请发布答案。不要编辑您的问题以包含解决方案并对其进行解决。否则，请接受最接近解决方案的答案之一。

标签： html css position css-position

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

我会使用绝对定位：

#play_button {
    position:absolute;
transition: .5s ease;
    left: 202px;
    top: 198px;

}

【讨论】：

【解决方案3】：

似乎有些什么屏幕中心。所以我想这样做

body { 
     background: url('http://oi44.tinypic.com/33tjudk.jpg') no-repeat center center fixed;    
     background-size:cover; 
     text-align: 0 auto; // Make the play button horizontal center
}

#play_button {
    position:absolute;  // absolutely positioned
    transition: .5s ease;
    top: 50%;  // Makes vertical center
}

【讨论】：

@Gaurang Tandon 我建议你检查一下这个jsfiddle.net/jZKyE/1 如果你有一些宽度和高度会更好，这样你可以获得更好的响应。

【解决方案4】：

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

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

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

【讨论】：