vertical align html form

Question

I'm looking to center this textbox and submit button on the page both vertically and horizontally but the following code just puts it in the top center. How can I center this to the page? It's like it's ignoring the vertical-align setting.

<div style="text-align:center; vertical-align:middle">
    <form action="save_thought.php" method="post">
        <input type="text" name="thought"><br>
        <input type="submit" value="Submit">
    </form>
</div>

Answer 1

None of the solutions provided above worked for me for my real proyect in which I wanted to center both vertically and horizontally a form inside a div (not taking as reference the full page) but I got it using display: flex; property. Just display your parent div as flex and then use the property margin: auto; for your child form.

In your case, it would be like this:

HTML code:

<div id="centeringDiv" style="display: flex;">
    <form id="mainForm" action="save_thought.php" method="post">
        <input type="text" name="thought"><br>
        <input type="submit" value="Submit">
    </form>
</div>

CSS code:

html, body{
  height: 100%;
  width: 100%;
  margin: 0;
}

#centeringDiv{
  height: 100%;
  width: 100%;
  display: flex;
}

#mainForm{
  margin: auto;
}

JSFiddle in which you can see that the form it is being centered both vertically and horizontally in the full page.