html - texto - Cómo alinear verticalmente una tabla en CSS

centrar texto horizontalmente y vertical css

Question

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

Answer 1

En general, algo parecido a esto funciona bastante bien en cualquier elemento de bloque con una altura definida.

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

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

html {
 height: 100%;
}

Puede encontrar algunas diferencias de navegador, actuar en consecuencia.

Answer 2

Si puede darle a la mesa una altura fija, entonces puede adaptar el CSS desde este sitio que acabo de hacer.

Es un poco complicado de explicar, pero básicamente establece un ''horizonte'' de 1 píxel a una altura del 50% de la pantalla alrededor de su contenido, luego compensa el 50% de su altura con la parte central del elemento (es decir, su tabla).

EDITAR: Aquí está el artículo original de mi solución, con explicación y todo.

Answer 3

Dicho brevemente, simplemente haga que su cuerpo sea una tabla, porque vertical-align sí funciona en las celdas de la tabla:

body, html { 
  height: 100%; 
}

body { 
  display: table; 
}

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

Esto alineará verticalmente tu pagewrapper a la mitad y deja que sea fluida 80%