Comment positionner une table au centre de div horizontalement et verticalement

Nous pouvons définir une image comme image de fond d'un <div>similaire:

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

J'ai besoin de mettre une table au centre d'un <div>horizontalement et verticalement. Existe-t-il une solution multi-navigateurs CSS?

Le centrage est l'un des plus gros problèmes de CSS. Cependant, quelques astuces existent:

Pour centrer votre tableau horizontalement, vous pouvez définir les marges gauche et droite sur auto:

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

Pour le centrer verticalement, le seul moyen est d'utiliser javascript:

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

Non vertical-align:middleest possible car une table est un bloc et non un élément en ligne.

Éditer

Voici un site web qui résume les solutions de centrage CSS: http://howtocenterincss.com/

Voici ce qui a fonctionné pour moi:

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

#table {
  align-self: center;
}

Et cela l'a aligné verticalement et horizontalement.

Pour positionner horizontalement au centre, vous pouvez dire width: 50%; margin: auto;. Autant que je sache, c'est cross browser. Pour l'alignement vertical, vous pouvez essayer vertical-align:middle;, mais cela ne fonctionnera que par rapport au texte. Cela vaut la peine d'essayer.

Ajoutez simplement margin: 0 auto;à votre table. Pas besoin d'ajouter une propriété àdiv

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

Remarque: Ajout d'une couleur d'arrière-plan à div pour visualiser l'alignement du tableau par rapport à son centre

De plus, si vous souhaitez centrer à la fois horizontalement et verticalement - au lieu d'avoir une conception de flux (dans de tels cas, les solutions précédentes s'appliquent) - vous pouvez faire:

1. Déclarez le div principal comme absoluteou relativepositionnement (je l'appelle content).
2. Déclarez un div interne, qui contiendra en fait la table (je l'appelle wrapper).
3. Déclarez la table elle-même, à l'intérieur de wrapperdiv.
4. Appliquez la transformation CSS pour changer le "point d'enregistrement" de l'objet wrapper à son centre.
5. Déplacez l'objet wrapper au centre de l'objet parent.

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

Remarque: vous ne pouvez pas vous débarrasser du div wrapper, car ce style ne fonctionne pas directement sur les tables, j'utilise donc un div pour l'envelopper et le positionner, tandis que le tableau est inséré dans le div.

Vous pouvez centrer une boîte à la fois verticalement et horizontalement, en utilisant la technique suivante:

Le conteneur extérieur:

• avoir dû display: table;

Le conteneur intérieur:

• avoir dû display: table-cell;
• avoir dû vertical-align: middle;
• avoir dû text-align: center;

La boîte de contenu:

• avoir dû display: inline-block;

Si vous utilisez cette technique, ajoutez simplement votre tableau (ainsi que tout autre contenu que vous souhaitez accompagner) dans la zone de contenu.

Démo:

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>

Voir aussi ce violon !

J'ai découvert que je devais inclure

body { width:100%; }

pour "margin: 0 auto" pour travailler pour les tableaux.