CSS: formulario central en página horizontal y verticalmente

¿Cómo puedo centrar el formulario llamado form_login horizontal y verticalmente en mi página?

Aquí está el HTML que estoy usando en este momento:

 

Intenté hacer el siguiente css pero mi formulario nunca está centrado:

 #form_login { left: 50%; top: 50%; margin-left: -25%; position: absolute; margin-top: -25%; } 

Si desea hacer un centrado horizontal, simplemente coloque el formulario dentro de una etiqueta DIV y aplique el atributo align = “center”. Entonces, incluso si se cambia el ancho del formulario, su centrado seguirá siendo el mismo.

 

ACTUALIZAR

@ G-Cyr tiene razón. align="center" atributo align="center" ahora está obsoleto. Puede usar el atributo text-align para esto de la siguiente manera.

 

Esto centrará todo el contenido dentro del DIV padre. Una forma opcional es usar margin: auto atributo margin: auto CSS con anchos y alturas predefinidos. Por favor, siga el siguiente hilo para más información.

¿Cómo centrar horizontalmente un centro en otro?

El centrado vertical es un poco difícil. Para hacer eso, puedes hacer lo siguiente.

html

  

Css

 #parent { display: table; width: 100%; } #form_login { display: table-cell; text-align: center; vertical-align: middle; } 

puede 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; } 

La respuesta aceptada no funcionó con mi formulario, incluso cuando lo reduje al mínimo indispensable y copié y pegué el código. Si alguien más tiene este problema, pruebe mi solución. Básicamente, configura Top and Left al 50% como lo hizo OP, pero compensa el contenedor del formulario con márgenes negativos en la parte superior e izquierda igual al 50% de la altura y el ancho del div, respectivamente. Esto mueve el punto central de las coordenadas superior e izquierda al centro de la forma. Haré hincapié en que se debe especificar la altura y el ancho del formulario (no relativo). En este ejemplo, un div de formulario 300x300px con márgenes de -150px en la parte superior e izquierda está perfectamente centrado sin importar el tamaño de la ventana:

HTML

    

CSS

 .login_div { position: absolute; width: 300px; height: 300px; /* Center form on page horizontally & vertically */ top: 50%; left: 50%; margin-top: -150px; margin-left: -150px; } .login_form { width: 300px; height: 300px; background: gray; border-radius: 10px; margin: 0; padding: 0; } 

JSFiddle

Ahora, para aquellos que se preguntan por qué utilicé un contenedor para el formulario, es porque me gusta tener la opción de colocar otros elementos en las cercanías de la forma y tenerlos centrados también. El contenedor de formulario es completamente innecesario en este ejemplo, pero definitivamente sería útil en otros casos. ¡Espero que esto ayude!

si usa un tramo negativo de translateX/Y altura no es necesaria y el estilo es muy corto

 #form_login { left: 50%; top: 50%; position: absolute; -webkit-transform: translate3d(-50%, -50%, 0); -moz-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); } 

Ejemplo en codepen: http://codepen.io/anon/pen/ntbFo

Soporte: http://caniuse.com/transforms3d

Te sugiero que uses bootstrap que funcione perfectamente:

 @import url('http://getbootstrap.com/dist/css/bootstrap.css'); html, body, .container-table { height: 100%; } .container-table { display: table; } .vertical-center-row { display: table-cell; vertical-align: middle; } 
      Login Page | ...     
Gardez moi connecté