Cómo colocar una mesa en el centro de div horizontal y verticalmente

Podemos establecer una imagen como imagen de fondo de un me <div>gusta:

<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>

Necesito poner una mesa en el centro de una <div>horizontal y vertical. ¿Existe una solución de navegador cruzado CSS?

El centrado es uno de los mayores problemas en CSS. Sin embargo, existen algunos trucos:

Para centrar su mesa horizontalmente, puede establecer el margen izquierdo y derecho en automático:

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

Para centrarlo verticalmente, la única forma es usar javascript:

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

No vertical-align:middlees posible ya que una tabla es un bloque y no un elemento en línea.

Editar

Aquí hay un sitio web que resume las soluciones de centrado de CSS: http://howtocenterincss.com/

Esto es lo que funcionó para mí:

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

#table {
  align-self: center;
}

Y esto lo alineó vertical y horizontalmente.

Para posicionar el centro horizontalmente se puede decir width: 50%; margin: auto;. Que yo sepa, ese es el navegador cruzado. Puede intentar la alineación vertical vertical-align:middle;, pero puede que solo funcione en relación con el texto. Sin embargo, vale la pena intentarlo.

Solo agrégalo margin: 0 auto;a tu table. No es necesario agregar ninguna propiedad adiv

<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: Se agregó color de fondo a div para visualizar la alineación de la tabla con su centro

Además, si desea centrar tanto horizontal como verticalmente, en lugar de tener un diseño de flujo (en tales casos, se aplican las soluciones anteriores) , puede hacer lo siguiente:

1. Declara el div principal como absoluteo relativeposicionamiento (lo llamo content).
2. Declare un div interno, que en realidad sostendrá la tabla (lo llamo wrapper).
3. Declara la tabla en sí, dentro de wrapperdiv.
4. Aplique la transformación CSS para cambiar el "punto de registro" del objeto contenedor a su centro.
5. Mueva el objeto contenedor al centro del objeto padre.

#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: no puede deshacerse del contenedor wrap, ya que este estilo no funciona directamente en las tablas, por lo que utilizo un div para envolverlo y colocarlo, mientras la tabla fluye dentro del div.

Puede centrar un cuadro tanto vertical como horizontalmente, utilizando la siguiente técnica:

El otro contenedor:

• debería tener display: table;

El contenedor interior:

• debería tener display: table-cell;
• debería tener vertical-align: middle;
• debería tener text-align: center;

El cuadro de contenido:

• debería tener display: inline-block;

Si utiliza esta técnica, simplemente agregue su tabla (junto con cualquier otro contenido que desee utilizar) al cuadro de contenido.

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>

Ver también este violín !

Descubrí que tenía que incluir

body { width:100%; }

para "margin: 0 auto" para trabajar en tablas.