Place div in the same place with different screen sizes

<div class="container-fluid"> <img src="imgs/3.jpg" alt="Avatar" class="image" style="width:101.65%; opacity: 0.8;"> <div class="middle"> <div class="text">Hello World</div> </div> </div>

.image {
opacity: 1;
display: block;
width: 100%;
margin-left: -16px;
height: auto;
transition: .5s ease;
backface-visibility: hidden;}

.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);}

.container-fluid:hover .middle {
opacity: 1;}
.text {
background-color: #333333;
color: white;
font-size: 16px;
margin-top: 662px;
padding: 30px 200px;}

The goal is to stay at the bottom of the div on any screen size.