Comment aligner verticalement une table en CSS

Question

Comment aligner verticalement une table au milieu de l'écran avec css?

Answer 1

Généralement quelque chose dans le sens de ceci fonctionne plutôt bien dans n'importe quel élément de bloc avec une hauteur définie.

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

Centrer sur la page est plus difficile puisque vous n'avez pas une hauteur définie, mais je pense que cela fonctionne.

html { 
height: 100%; 
} 

Vous pouvez rencontrer des différences de navigateur, agir en conséquence.

Answer 2

Si vous pouvez donner à la table une hauteur fixe, alors n'hésitez pas à adapter le CSS de this site Je viens de le faire.

Peu compliqué à expliquer, mais vous définissez fondamentalement un 'horizon' de 1 pixel à 50% de la hauteur de l'écran autour de votre contenu, puis décalez le haut de l'élément à centrer (ie votre table) de 50% sa hauteur.

EDIT: Here's the article J'ai fait à l'origine ma solution de, avec l'explication & tout.

Answer 3

Peu dit, il suffit de faire votre corps une table, car vertical-align fonctionne sur les cellules de table-:

body, html { 
    height: 100%; 
} 

body { 
    display: table; 
} 

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

Cela vertical aligner votre pagewrapper au milieu et que ce soit fluide 80%