Переместить элемент ввода в центр div

Question

Мне нужно переместить элемент ввода формы слева в центр элемента div. Я пытался решить эту проблему по марже: авто и положение: относительное. Второй способ работает, но есть небольшая проблема. Когда я изменяю размер окна браузера, элемент ввода меняет свою позицию. Как избежать этого, решая первую проблему одновременно?

Снимок экрана

#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

Просто примените text-align:center к 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>

Answer 2

Попробуйте в .frame input изменить элемент display на flex;. Таким образом, кнопка отображается в середине страницы, даже если страница уменьшена

.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;  
}

Я надеюсь, что это решит вашу проблему