Edit nowdays, grid is widely supported and if the form stands all alone in body, the code can be shortened.
html {
min-height: 100%;/* fill the screen height to allow vertical alignement */
display: grid; /* display:flex works too since body is the only grid cell */
}
body {
margin: auto;
}
<form id="form_login">
<p>
<input type="text" id="username" placeholder="username" />
</p>
<p>
<input type="password" id="password" placeholder="password" />
</p>
<p>
<input type="text" id="server" placeholder="server" />
</p>
<p>
<button id="submitbutton" type="button">Se connecter</button>
</p>
</form>
you can use display:flex
to do this : http://codepen.io/anon/pen/yCKuz
html,body {
height:100%;
width:100%;
margin:0;
}
body {
display:flex;
}
form {
margin:auto;/* nice thing of auto margin if display:flex; it center both horizontal and vertical :) */
}
or display:table
http://codepen.io/anon/pen/LACnF/ (for a mail, use a table instead display)
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
display:table;
}
body {
display:table-cell;
vertical-align:middle;
}
form {
display:table;/* shrinks to fit content */
margin:auto;
}