Is it possible to center a form input element within a div element without it changing position when the browser window size is adjusted? I attempted using margin: auto and position: relative, but encountered issues with the element moving. How can this be resolved while still achieving the desired center alignment?
#stretch5 {
display: flex;
justify-content: center;
align-items: center;
height: 30em;
background-image: url(img/newsletter.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}
.frame {
position: relative;
display: inline-block;
height: 25em;
top: 50px;
bottom: 100px;
margin: auto;
width: 100%;
border: 5px solid #fff;
margin-left: auto;
margin-right: auto;
transform: scale(0.8975, 0.8975) translate(-68.5808px, -31.2925px);;
}
.frame h2 {
font-size: 1.4em;
}
.frame input[type=submit] {
padding: 5px 15px;
background: #f7e0cd;
text-transform: uppercase;
border: 0 none;
display: inline-block;
margin: auto;
outline: 0;
cursor: pointer;
width: 2em;
}<div id="stretch5" class="newsletter-opt-in">
<div class="frame">
<h2>Join our<span class="vip">VIP list</span></h2>
<p class="vip-list-paragraph">For exclusive tips, free resources and the best insights</p>
<form action="#">
<input type="submit" value="SUBSCRIBE">
</form>
</div>
</div>