How to position a button centered on top of an image - html

Question

I have been trying to make a simple site like this. The button never does show up as intended. I want #play_button to show up exactly on the play button image in the background. How can it be done?
My CSS code:
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);
}
Just one thing more, problem occurring is that if I resize the browser window, then the image moves to a new position.
UPDATE:
Problem solved :) Here, in this example, you can see how the button remains in the center of the page even if you resize the browser window.As always, you can tweak the left and top offsets to get the desired results. Here's the code.

Answer 1

Try using absolute positioning, rather than relative positioning
this should get you close - you can adjust by tweaking margins or top/left positions
#play_button {
position:absolute;
transition: .5s ease;
top: 50%;
left: 50%;
}
http://jsfiddle.net/rolfsf/9pNqS/

Answer 2

I'd use absolute positioning:
#play_button {
position:absolute;
transition: .5s ease;
left: 202px;
top: 198px;
}

Answer 3

It seems some what center of the screen. So I would like to do like this
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
}

Answer 4

So, the trick here is to use absolute positioning calc like this:
top: calc(50% - XYpx);
left: calc(50% - XYpx);
where XYpx is half the size of your image, in my case, the image was a square. Of course, in this now obsolete case, the image must also change its size proportionally in response to window resize to be able to remain at the center without looking out of proportion.