Move input element to the center of the div - html

Question

I need to move form input element from left to the center of div element.
I tried to solve this problem by margin: auto and position: relative.
The second way works, but there is a small problem. When I change the size
of the browser window, the input element changes its position. How to avoid it
by solving the first problem at the same time?
Screenshot
#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 the exclusive tips, free resources and best tips</p>
<form action="#">
<input type="submit" value="SUBSCRIBE">
</form>
</div>
</div>

Answer 1

Try in .frame input to change the element display to flex;. So the button is displayed in the middle of the page even if the page is reduced
.frame input[type=submit] {
padding: 5px 15px;
background: #f7e0cd;
text-transform: uppercase;
border: 0 none;
display: flex;
margin: auto;
outline: 0;
cursor: pointer;
width: 2em;
}
I hope it will solves your problem

Answer 2

Just apply text-align:center to the form.
#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 {
height: 25em;
border: 5px solid #fff;
border: 1px solid red;
display: flex;
flex-direction: column;
}
.frame h2 {
font-size: 1.4em;
}
form {
text-align: center;
}
.frame input[type=submit] {
padding: 5px 15px;
background: #f7e0cd;
text-transform: uppercase;
outline: 0;
cursor: pointer;
}
<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 the exclusive tips, free resources and best tips</p>
<form action="#">
<input type="submit" value="SUBSCRIBE">
</form>
</div>
</div>