Come posizionare un tavolo al centro di div orizzontalmente e verticalmente

Possiamo impostare un'immagine come immagine di sfondo di un <div>simile:

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

Ho bisogno di impostare un tavolo al centro di un <div>orizzontale e verticale. Esiste una soluzione cross-browser in uso CSS?

Il centraggio è uno dei maggiori problemi nel CSS. Tuttavia, esistono alcuni trucchi:

Per centrare la tabella in orizzontale, puoi impostare il margine sinistro e destro su auto:

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

Per centrarlo verticalmente, l'unico modo è usare 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:middleè possibile in quanto una tabella è un blocco e non un elemento incorporato.

modificare

Ecco un sito Web che riassume le soluzioni di centraggio CSS: http://howtocenterincss.com/

Ecco cosa ha funzionato per me:

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

#table {
  align-self: center;
}

E questo lo ha allineato verticalmente e orizzontalmente.

Per posizionare orizzontalmente al centro si può dire width: 50%; margin: auto;. Per quanto ne so, è un browser incrociato. Per l'allineamento verticale puoi provare vertical-align:middle;, ma potrebbe funzionare solo in relazione al testo. Vale la pena provare comunque.

Basta aggiungere margin: 0 auto; al tuo table. Non è necessario aggiungere alcuna proprietà 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: aggiunto il colore di sfondo al div per visualizzare l'allineamento della tabella al suo centro

Inoltre, se si desidera centrare sia in orizzontale che in verticale, anziché disporre di una progettazione del flusso (in tali casi, si applicano le soluzioni precedenti) , è possibile eseguire:

1. Dichiara il div principale come absoluteo il relativeposizionamento (lo chiamo content).
2. Dichiara un div interno, che conterrà effettivamente il tavolo (lo chiamo wrapper).
3. Dichiara la tabella stessa, all'interno del wrapperdiv.
4. Applicare la trasformazione CSS per modificare il "punto di registrazione" dell'oggetto wrapper al suo centro.
5. Spostare l'oggetto wrapper al centro dell'oggetto principale.

#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: non è possibile eliminare il div wrapper, poiché questo stile non funziona direttamente sui tavoli, quindi utilizzo un div per avvolgerlo e posizionarlo, mentre il tavolo scorre all'interno del div.

Puoi centrare un riquadro sia in verticale che in orizzontale, usando la seguente tecnica:

Il contenitore esterno:

• avrebbe dovuto display: table;

Il contenitore interno:

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

La casella del contenuto:

• avrebbe dovuto display: inline-block;

Se usi questa tecnica, aggiungi semplicemente la tua tabella (insieme a qualsiasi altro contenuto che desideri seguire) nella casella del contenuto.

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>

Vedi anche questo violino !

Ho scoperto che dovevo includere

body { width:100%; }

affinché "margin: 0 auto" funzioni per le tabelle.