Solución:
puedes usar display:flex para hacer esto: 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 :) */
}
o display:table http://codepen.io/anon/pen/LACnF/
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;
}
Si desea hacer un centrado horizontal, simplemente coloque el formulario dentro de una etiqueta DIV y aplíquele el atributo align = “center”. Entonces, incluso si se cambia el ancho del formulario, su centrado seguirá siendo el mismo.
<div align="center"><form id="form_login"><!--form content here--></form></div>
ACTUALIZAR
@ G-Cyr tiene razón. align="center" El atributo ahora está obsoleto. Puedes usar text-align atributo para esto de la siguiente manera.
<div style="text-align:center"><form id="form_login"><!--form content here--></form></div>
Esto centrará todo el contenido dentro del DIV principal. Una forma opcional es utilizar margin: auto Atributo CSS con anchos y alturas predefinidos. Siga el siguiente hilo para obtener más información.
¿Cómo centrar horizontalmente a en otro?
El centrado vertical es un poco más complicado. Para hacer eso, puede hacer lo siguiente.
html
<body>
<div id="parent">
<form id="form_login">
<!--form content here-->
</form>
</div>
</body>
CSS
#parent {
display: table;
width: 100%;
}
#form_login {
display: table-cell;
text-align: center;
vertical-align: middle;
}
si usas un negativo translateX/Y el ancho y el alto no son necesarios y el estilo es realmente corto
#form_login {
left : 50%;
top : 50%;
position : absolute;
transform : translate(-50%, -50%);
}<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>Alternativamente, podría usar display: grid (consulte la vista de página completa)
body {
margin : 0;
padding : 0;
display : grid;
place-content : center;
min-height : 100vh;
}<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>