I can't position the button inside my image - html

Question

Basically, I want to position the button inside the image, and make it stay in its position when I switch to mobile mode or change the size of the window.
This is what I want it to look like:
https://prnt.sc/mij0s6
.img-wrapper {
position: relative;
}
.img-responsive {
max-width: 100%;
height: auto;
margin-top: 180px;
margin-left: 360px;
}
a.btn {
display: inline-block;
padding: 0.2em 1.45em;
margin: 0.1em;
border: 0.15em solid #CCCCCC;
box-sizing: border-box;
text-decoration: none;
font-family: 'Segoe UI', 'Roboto', sans-serif;
font-weight: 400;
color: #000000;
background-color: #ffc966;
text-align: center;
position: relative;
}
a.btn:hover {
border-color: #7a7a7a;
}
a.btn:active {
background-color: #999999;
}
#media all and (max-width:30em) {
a.btn {
display: block;
margin: 0.2em auto;
}
}
<h1>De zakelijke VR/AR hardware leverancier van Benelux</h1>
<div class="img-wrapper">
<img class="img-responsive" src="vrgt.png">
</div>
Meer Info

Answer 1

(I posted prematurely.. pressed the post button by accident)... You had no css for img or H1.. I added some, I also added a max-width for image in both the main css and the reponsive (media) css.
The code could do with a bit of tweaking but I'd advise you have a look and adapt it to your needs. It's closer to what you want I think!
EDIT: I'd advise you add a few more media queries to accommodate different screen resolutions as absolute positioning can be a bit of a nightmare on differently-sized devices. Screenfly is a good tool for testing how your code looks on multiple sizes. Using large margin-bottoms measured in pixels (such as 360px) may result in your button not even displaying on a screen, so try to use vertical height (vh) or percentages when measuring height especially. The [calc function] is also very useful 2. Useful css for centering are margin : 0 auto or text-align:center;
Best of luck, and hope this helps
h1 {
text-align: center;
font-weight: bold;
font-size: 1.8em;
}
img {
max-width: 70%;
max-height: 80%;
margin: 10px 12%;
}
img-wrapper {
display: inline-block;
position: relative;
}
nav {
margin: 0 auto;
}
nav ul {
list-style-type: none;
background-color: lightgrey;
width:100%;
}
nav ul li {
min-width:18%;
display: inline-block;
text-align: center;
padding: 10px;
margin:0 auto;
}
ul li a {
padding: 10px 15px;
text-decoration: none;
}
/*.img-responsive {
/* margin-top: 100px;
margin-left: 360px;
}*/
a.btn {
display: inline-block;
padding: 0.2em 1.45em;
margin: 0.1em;
border: 0.15em solid #CCCCCC;
box-sizing: border-box;
text-decoration: none;
font-family: 'Segoe UI', 'Roboto', sans-serif;
font-weight: 400;
color: #000000;
background-color: #ffc966;
text-align: center;
position: relative;
}
a.btn:hover {
border-color: #7a7a7a;
}
a.btn:active {
background-color: #999999;
}
#media all and (max-width:30em) {
img {
max-width: 400px;
}
a.btn {
display: block;
margin: 0.2em auto;
}
}
<h1>De zakelijke VR/AR hardware leverancier van Benelux</h1>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</nav>
<div class="img-wrapper">
<img class="img-responsive" src="https://gilsig.ca/wp-content/uploads/2015/10/12391435_192385974441516_971157875868647436_n.jpg-North-Shore-Mountains-Dec-2015.jpg">
</div>
Meer Info

Answer 2

Button's position should be absolute relative to it's first parent element.
a.btn
{
position: absolute;
top: 50%;
left: 50%;
}
.img-wrapper {
position: relative;
}
a.btn {
position: absolute;
top: 50%;
left: 50%;
padding: 0.2em 1.45em;
margin: 0.1em;
border: 0.15em solid #CCCCCC;
box-sizing: border-box;
text-decoration: none;
font-family: 'Segoe UI', 'Roboto', sans-serif;
font-weight: 400;
color: #000000;
background-color: #ffc966;
text-align: center;
}
a.btn:hover {
border-color: #7a7a7a;
}
a.btn:active {
background-color: #999999;
}
<div class="img-wrapper">
<img src="https://www.w3schools.com/css/img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
</div>
Meer Info