Como posso alinhar verticalmente um no meio de uma altura fixa?

porque é que o código abaixo não faz com que o <table> esteja alinhado verticalmente no meio do <div>?

<div style="width: 850px; height: 470px;vertical-align: middle;" align="center">
        <table style="padding-left: 20px; width: 700px; border: 10px groove #0033CC; background-color: #F9F9F9;">
            <tr>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
            </tr>            <tr>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
            </tr>
            <tr>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
            </tr>
        </table>
    </div>

quero o <table> no meio do <div>, mas está no topo! Como posso resolver isto?

Obrigado pelo teu futuro Conselho.

Author: Paul D. Waite, 2010-10-31
Source

4 answers

Fora das células da tabela, vertical-align define o alinhamento vertical do texto dentro de uma linha, em vez do alinhamento vertical de elementos inteiros como a sua tabela.

No entanto, se colocar display: table-cell; no seu <div>, Isso parece atingir o efeito que pretende. Mas não sei quantos navegadores apoiam isto. Verifiquei no Chrome 6, Firefox 2 e Opera 10.5, e eles não se importam. O Internet Explorer pode ser um assunto diferente.
 5
Author: Paul D. Waite, 2010-10-31 19:30:34

Tenta isto: 

<body style="vertical-align:middle">
<table style="display:inline-block">
<!-- your stuff -->
</table>
</body>

table é um elemento de bloco. Para fazê-lo alinhar verticalmente, acho que precisa ser exibido como inline. Muitas vezes dar-lhe-á o melhor de ambos os mundos em situações como esta. Saúde!

 0
Author: Jim Fell, 2010-11-01 17:43:46
É fácil. Use sempre isto > > style = "vertical-align: middle"
 -2
Author: KaiLynn Darkpixie, 2015-01-03 13:49:48

Tenta isto: 

#centerAligned{
    text-align: center;
    margin-top: 50%;
}
Funcionou comigo!!
 -3
Author: Deepak Badiger, 2016-10-17 10:30:45