Cómo alinear verticalmente una tabla en CSS

Question

¿Cómo puedo alinear verticalmente una tabla en el medio de la pantalla con css?

Answer 1

En general, algo en la línea de esto funciona bastante bien en cualquier elemento de bloque con una altura definida.

table { 
position: absolute; 
top: 50%; 
margin-top: -50%; 
} 

Centrado en la página es más difícil ya que no tiene una altura definida, pero creo que esto funciona.

html { 
height: 100%; 
} 

Es posible que encuentre algunas diferencias en el navegador, actúe en consecuencia.

Answer 2

Si puede darle a la mesa una altura fija, entonces puede adaptar la CSS desde this site que acabo de hacer.

Bit complicado de explicar, pero básicamente establece un 'horizonte' de 1 píxel a 50% de altura de la pantalla alrededor de su contenido, luego compensa la parte superior del elemento para centrar (es decir, su tabla) en un 50% de su altura.

EDIT: Here's the article Originalmente hice mi solución desde, con la explicación & todo.

Answer 3

Poco dicho, simplemente hacer que su cuerpo una mesa, porque vertical-align funciona en la tabla de las células:

body, html { 
    height: 100%; 
} 

body { 
    display: table; 
} 

#wrapper { 
    display: table-cell; 
    vertical-align: middle; 
    height: 80%; 
} 

Esto alineará vertical de su pagewrapper a medio y deja que sea fluida 80%