So positionieren Sie einen Tisch in der Mitte von div horizontal und vertikal

Wir können ein Bild als Hintergrundbild eines <div>ähnlichen festlegen :

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

Ich muss einen Tisch in der Mitte eines <div>horizontal und vertikal einstellen . Gibt es eine browserübergreifende Lösung CSS?

Das Zentrieren ist eines der größten Probleme in CSS. Es gibt jedoch einige Tricks:

Um Ihre Tabelle horizontal zu zentrieren, können Sie den linken und rechten Rand auf automatisch einstellen:

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

Um es vertikal zu zentrieren, können Sie nur Javascript verwenden:

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

Nein vertical-align:middleist möglich, da eine Tabelle ein Block und kein Inline-Element ist.

Bearbeiten

Hier ist eine Website, die CSS-Zentrierungslösungen zusammenfasst: http://howtocenterincss.com/

Folgendes hat bei mir funktioniert:

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

#table {
  align-self: center;
}

Und das richtete es vertikal und horizontal aus.

Um horizontal zentriert zu positionieren, kann man sagen width: 50%; margin: auto;. Soweit ich weiß, ist das Cross-Browser. Für die vertikale Ausrichtung können Sie versuchen vertical-align:middle;, aber es funktioniert möglicherweise nur in Bezug auf Text. Es ist jedoch einen Versuch wert.

Fügen margin: 0 auto;Sie einfach zu Ihrem hinzu table. Sie müssen keine Eigenschaft hinzufügendiv

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

Hinweis: Hintergrundfarbe zu div hinzugefügt, um die Ausrichtung der Tabelle zu ihrer Mitte zu visualisieren

Wenn Sie sowohl horizontal als auch vertikal zentrieren möchten, anstatt ein Flussdesign zu haben (in solchen Fällen gelten die vorherigen Lösungen), können Sie Folgendes tun:

1. Deklarieren Sie die Hauptdiv als absoluteoder relativePositionierung (ich nenne es content).
2. Deklarieren Sie ein inneres Div, das tatsächlich den Tisch enthält (ich nenne es wrapper).
3. Deklarieren Sie den Tisch selbst innerhalb von wrapperdiv.
4. Wenden Sie die CSS-Transformation an, um den "Registrierungspunkt" des Wrapper-Objekts in dessen Mitte zu ändern.
5. Verschieben Sie das Wrapper-Objekt in die Mitte des übergeordneten Objekts.

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

Hinweis: Sie können das Wrapper-Div nicht entfernen, da dieser Stil nicht direkt für Tabellen funktioniert. Daher verwende ich ein Div, um es zu verpacken und zu positionieren, während die Tabelle innerhalb des Div fließt.

Sie können eine Box mit der folgenden Technik sowohl vertikal als auch horizontal zentrieren:

Der Außenbehälter:

• sollte haben display: table;

Der innere Behälter:

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

Das Inhaltsfeld:

• sollte haben display: inline-block;

Wenn Sie diese Technik verwenden, fügen Sie einfach Ihre Tabelle (zusammen mit allen anderen Inhalten, die Sie dazu verwenden möchten) zum Inhaltsfeld hinzu.

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>

Siehe auch diese Geige !

Ich entdeckte, dass ich einbeziehen musste

body { width:100%; }

für "margin: 0 auto" für Tabellen.