Wrong layout when adding button to different images - html

Question

I want to add button to images (display a button on top of an image with center position). Thing goes well if the image is 100% width. But if it's 50% width, the button isn't centered on top of the image.
.container {
position: relative;
width: 100%;
max-width: 1000px;
}
.container img {
width: 100%;
height: auto;
}
.container .btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
}
<h2>Button on Image</h2>
<p>Add a button to an image:</p>
<div class="container">
<img src="img_snow.jpg" alt="Snow" style="width:100%">
<button class="btn">Button</button>
</div>
<div class="container">
<img src="img_snow.jpg" alt="Snow" style="width: 200px; float:left;margin-left:15%">
<button class="btn">Button</button>
</div>
Wrong output:
Click to see the image
Thank you so so much!!

Answer 1

The button will stay in the center of container because the absolute position looks for nearest relative element.
now you have two options:
1- set image in center of container by adding a margin-left:25%
2- set container width to 50% instead of image width
look at this please :
<h2>Button on Image</h2>
<p>Add a button to an image:</p>
<div class="container">
<img src="https://picsum.photos/800/600" alt="Snow" style="width:100%">
<button class="btn">Button</button>
</div>
<div class="container">
<img src="https://picsum.photos/200/200" alt="Snow" style="width:50%; margin-left:25%;">
<button class="btn">Button</button>
</div>
<div class="container" style="width:50%">
<img src="https://picsum.photos/200/200" alt="Snow" style="">
<button class="btn">Button</button>
</div>
Code Pen

Answer 2

I suggest you style it like this. The container is dimensioned by the image size, and the button is positioned absolutely relative to the container at 50% horizontally and vertically by the half of its own dimensions, then translated leftwards and upwards by the half of the button's dimensions (-50%, -50%).
.container {
position: relative;
display: inline-block;
}
.container>img {
display: block;
}
.container>button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
}
<div class="container">
<img src="https://www.cinematheque.fr/cache/media/01-films/la_maison_du_docteur-e/s,725-75eea0.jpg">
<button>Button</button>
</div>
<div class="container">
<img style="width: 200px;" src="https://www.cinematheque.fr/cache/media/01-films/la_maison_du_docteur-e/s,725-75eea0.jpg">
<button>Button</button>
</div>