PLAY按鈕（CSS，HTML）

Question

所以，我有這個ID的DIV：

#button{ 
    width: 1280px; 
    text-align: center; 
} 

#panel{ 
    position:absolute; 
    width: 100%; 
    text-align: center; 
} 

    <div id="panel"> 
     <img position="absolute" src="http://www.ionixpower.com/wp-content/uploads/2014/07/Grass-globe-1-1280x500.jpg"> 
    </div> 
    <div id="button"> 
     <img src="http://2.firepic.org/2/images/2015-11/07/k9l53oj2fqg7.png"> 
    </div> 

它包含一個圖像是在寬度爲1280像素，標題圖片。

我需要在這張圖片的中間放置一個PLAY按鈕，這樣如果我調整瀏覽器窗口的大小或放大或縮小它，它就不會離開它;儘管此按鈕需要以大多數現有分辨率爲中心。

我該怎麼做？

Answer 1

試試這個https://jsfiddle.net/1rt9g601/2/

HTML

<div id="panel"> 
    <button class="play">Play button</button> 
</div> 

CSS

#panel { 
    width: 100vw; 
    height: 100vh; 
    text-align: center; 
    position:relative; 
    background: url('http://placehold.it/1980x960'); 
    background-size: cover; 
    background-position: center; 
} 

button { 
    position: absolute; 
    top: 50%; 
    -ms-transform: translate(-35px, -20px); 
    -webkit-transform: translate(-35px, -20px); 
    transform:translate(-35px, -20px); 
}