Como posicionar uma mesa no centro de div horizontal e verticalmente

Podemos definir uma imagem como imagem de fundo de um <div>like:

<style>
    #test { 

        background-image: url(./images/grad.gif); 
        background-repeat: no-repeat;
        background-position: center center; 

        width:80%; 
        margin-left:10%; 
        height:200px; 
        background-color:blue;

    }

</style>

<div id="test"></div>

Eu preciso colocar uma mesa no centro de uma <div>horizontal e verticalmente. Existe uma solução entre navegadores usando CSS?

A centralização é um dos maiores problemas do CSS. No entanto, existem alguns truques:

Para centralizar sua tabela horizontalmente, você pode definir as margens esquerda e direita como automáticas:

<style>
  #test {
    width:100%;
    height:100%;
  }
  table {
    margin: 0 auto; /* or margin: 0 auto 0 auto */
  }
</style>

Para centralizá-lo verticalmente, a única maneira é usar o javascript:

var tableMarginTop = Math.round( (testHeight - tableHeight) / 2 );
$('table').css('margin-top', tableMarginTop) # with jQuery
$$('table')[0].setStyle('margin-top', tableMarginTop) # with Mootools

Não vertical-align:middleé possível, pois uma tabela é um bloco e não um elemento embutido.

Editar

Aqui está um site que resume as soluções de centralização CSS: http://howtocenterincss.com/

Aqui está o que funcionou para mim:

#div {
  display: flex;
  justify-content: center;
}

#table {
  align-self: center;
}

E isso o alinhava vertical e horizontalmente.

Para posicionar horizontalmente no centro, você pode dizer width: 50%; margin: auto;. Até onde eu sei, isso é entre navegadores. Para o alinhamento vertical, você pode tentar vertical-align:middle;, mas pode funcionar apenas em relação ao texto. Vale a pena tentar embora.

Basta adicionar margin: 0 auto;ao seu table. Não há necessidade de adicionar nenhuma propriedade aodiv

<div style="background-color:lightgrey">
 <table width="80%" style="margin: 0 auto; border:1px solid;text-align:center">
    <tr>
      <th>Name </th>
      <th>Country</th>
    </tr>
    <tr>
      <td>John</td>
      <td>US </td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>India </td>
    </tr>
 </table>
<div>

Nota: Adicionado cor de fundo para div para visualizar o alinhamento da tabela ao centro

Além disso, se você deseja centralizar horizontalmente e verticalmente - em vez de ter um design de fluxo (nesses casos, as soluções anteriores se aplicam) - você pode:

1. Declare a div principal como absoluteou relativeposicionamento (eu a chamo content).
2. Declare uma div interna, que realmente manterá a mesa (eu a chamo wrapper).
3. Declare a tabela em si, dentro de wrapperdiv.
4. Aplique a transformação CSS para alterar o "ponto de registro" do objeto wrapper para o centro.
5. Mova o objeto wrapper para o centro do objeto pai.

#content {
  width: 5em;
  height: 5em;
  border: 1px solid;
  border-color: red;
  position: relative;
  }

#wrapper {
  width: 4em;
  height: 4em;
  border: 3px solid;
  border-color: black;
  position: absolute;
  left: 50%; top: 50%; /*move the object to the center of the parent object*/
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  /*these 5 settings change the base (or registration) point of the wrapper object to it's own center - so we align child center with parent center*/
  }

table {
  width: 100%;
  height: 100%;
  border: 1px solid;
  border-color: yellow;
  display: inline-block;
  }

<div id="content">
    <div id="wrapper">
        <table>
        </table>
    </div>
</div>

Nota: Você não pode se livrar da div do wrapper, pois esse estilo não funciona diretamente nas tabelas, então eu uso uma div para quebrá-lo e posicioná-lo, enquanto a tabela flui dentro do div.

Você pode centralizar uma caixa na vertical e na horizontal, usando a seguinte técnica:

O recipiente externo:

• deveria display: table;

O recipiente interno:

• deveria display: table-cell;
• deveria vertical-align: middle;
• deveria text-align: center;

A caixa de conteúdo:

• deveria display: inline-block;

Se você usar essa técnica, basta adicionar sua tabela (junto com qualquer outro conteúdo que você desejar) à caixa de conteúdo.

Demo:

body {
    margin : 0;
}

.outer-container {
    position : absolute;
    display: table;
    width: 100%;
    height: 100%;
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.centered-content {
    display: inline-block;
    background: #fff;
    padding : 20px;
    border : 1px solid #000;
}

<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        <em>Data :</em>
        <table>
            <tr>
                <th>Name</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>Tom</td>
                <td>15</td>
            </tr>
            <tr>
                <td>Anne</td>
                <td>15</td>
            </tr>
            <tr>
                <td>Gina</td>
                <td>34</td>
            </tr>
        </table>
     </div>
   </div>
</div>

Veja também este violino !

Eu descobri que tinha que incluir

body { width:100%; }

para "margin: 0 auto" funcione para tabelas.