vertical align html form - html

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

You can use position:absolute DEMO http://jsfiddle.net/kevinPHPkevin/U8dZr/
div#form-wrapper {
position:absolute;
top:50%;
right:0;
left:0;
}

Answer 2

You can also go for this:
HTML
<div id="main" >
<form id="frm" action="save_thought.php" method="post">
<input type="text" name="thought"><br>
<input type="submit" value="Submit">
</form>
</div>
CSS
#main
{
line-height: 400px;
text-align:center;
vertical-align:middle;
}
#frm
{
display: inline-block;
vertical-align: middle;
line-height: 14px;
}
Demo Here

Answer 3

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.

Answer 4

CSS will probably never stop to amaze me. Given Dhaval Marthak's answer I was actually able to achieve what I wanted, right aligned labels and left aligned fields (on the right of the labels of course):
label {
display: block;
position:relative;
text-align: right;
width: 100px;
margin: 0 0 5px 0;
}
label > input,
label > select,
input {
position: absolute;
left: 120px;
}
The JSfiddle still points out my remaining problem, the field will align with the bottom of the label if the label breaks the line. But I am sure that can be amended as well.
Of course it would also be nice if the space between labels and fields could be assigned more "dynamically" based on the sizes of the labels (e.g. in different languages) but I have not seen this done anywhere so far. I guess I will have to resort to tables if I really need it.

Answer 5

You have have to change the width from "100%" to "px" and then you have to do margin: "auto".
Then the form will be centered horizontally.