How do I center this input vertically?

Question

[![

div#newsletter{
    text-align: center;
    background-color: #000000;
    padding: 10px;
    margin-bottom: 5px;
    }
    div#newsletter input{
    border-radius: 3px;
    border: 2px #606060 solid;
    padding: 15px;
    width: 30%;
    background-color: #ffffff;
}
div#newsletter input.botao{
    width: 20%;
}

<div id="newsletter">
            <form>
                <h1>Quer receber nossas promoções?</h1>
                <input type="text" name="nome" value="" placeholder="Digite seu nome">
                <input type="text" name="email" value="" placeholder="Digite seu email">
                <input type="button" value="Receber" class="botao">
            </form>
        </div>

]2]2

Answer 1

I don’t know if I get it, but here’s the thing, you can use the tag to center in the html document, or if you want to center inside some div, form etc some element, you use a css:

.element-container { /*Aqui no caso é o form*/
    width: 300px; /*Aqui você limita o tamanho da largura*/
}

.element-child { /*e aqui você coloca a largura de 100% do elemento pai que é o form */
    width: 100%;
}

form {
  width: 300px;
  text-align: vertical;
  color: white;
  background-color: #3399cc;
  padding: 10px;
  border-radius: 10px;
}

input.txt {
  width: 100%;
  height: 30px;
  border: 1px solid #3399ff;
  outline: none;
}

input {
  border-radius: 5px;
}

input.btn {
  width: 100px;
  height: 30px;
  color: white;
  background-color: #3399ff;
  border: 1px solid white;
  cursor: pointer;
  outline: none;
}

<div id="newsletter">
            <center>
              <h1>Quer receber nossas promoções?</h1>
              <form>
                  Nome:
                  <input class="txt" type="text" name="nome" value="" placeholder="">
                  Email:
                  <input class="txt" type="text" name="email" value="" placeholder=""><br><br>
                  <input class="btn" type="button" value="Receber" class="botao">
              </form>
            </center>
        </div>