CSSでボタンを正確に配置する方法

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);
}

更新：

さらにもう1つ、問題が発生するのは、ブラウザウィンドウのサイズを変更すると、画像が新しい位置に移動することです。

更新：

問題は解決しました:) ここでは、この例では、ブラウザウィンドウのサイズを変更してもボタンがページの中央にどのように残るかを確認できます。いつものように、leftおよびtopオフセットを使用して、目的の結果を取得します。これがコードです。

htmlcsspositioncss-position

2013/09/05Gaurang Tandon

したがって、ここでのトリックは、絶対配置 calc を次のように使用することです。

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

ここで、XYpxは画像の半分のサイズです。私の場合、画像は正方形でした。もちろん、この時代遅れのケースでは、画像はウィンドウのサイズ変更に応じてそのサイズを比例的に変更し、プロポーションから外れることなく中央に留まるようにする必要があります。

2017/03/24Gaurang Tandon