html - Center an button with respect to an image CSS -

I need the page where it is centered between an image and there is a button inside of which I get I can not do that, to resize that browser window, force the button to stay in the same position. This page is:

HTML code:

  & lt; Div id = "myimage" & gt; & Lt; Img id = "theImage" src = "http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" & gt; & Lt; Button ID = "mybutton" & gt; Start here & lt; / Button & gt; & Lt; / Div & gt;  

CSS:

  #MyImage {status: relative; } #the image {status: relative; Margin-left: auto; Margin-right: auto; Margin-top: 20px; Display area; Width: Auto; Height: auto; Max-width: 400px; } #myButton {Position: Absolute; Left: 0 pixels; Top: 0 pixels; }  

Now if you re-size the window, you will see the problem; The button belongs to the left coordinate window and the image is not, so when you resize the window, when I want it to be in the same position in the image. If you re-size the window to get a better view of what I need and see the download Whatsapp Button or "Simple Private ..." text, you will see that they are respected in the same position. Remain. His background image, which is centered on the screen as a width change. I would like to know why I need to convert it to my code to get that result

here One is centered image with a button inside the image

HTML

  & lt; Div id = "myimage" & gt; & Lt; Img id = "theImage" src = "http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" /> & Lt; Button ID = "mybutton" & gt; Start here & lt; / Button & gt; & Lt; / Div & gt;  

css

  #MyImage {status: relative; Margin: 20 px auto 0; Width: 100%; Max-width: 400px; } #image {display: block; Status: Relative; Width: 100%; } #myButton {Position: Absolute; Left: 0 pixels; Top: 0 pixels; }