So positionieren Sie eine Tabelle horizontal und vertikal in der Mitte von div

Lesezeit: 3 Minuten

Benutzer-Avatar
Mou

Wir können ein Bild als Hintergrundbild von a festlegen <div> wie:

<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 von a decken <div> horizontal & vertikal. Gibt es eine Cross-Browser-Lösung mit CSS?

Folgendes hat bei mir funktioniert:

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

#table {
  align-self: center;
}

Und das richtete es vertikal und horizontal aus.

  • Das muss die beste Antwort sein!

    – Riopiedra

    29. Mai 2018 um 17:40 Uhr

Benutzer-Avatar
Luis Masuelli

Wenn Sie außerdem sowohl horizontal als auch vertikal zentrieren möchten –anstelle eines Flow-Designs (in solchen Fällen gelten die vorherigen Lösungen)– du könntest es tun:

  1. Deklarieren Sie das Haupt-Div als absolute oder relative Positionierung (ich nenne es content).
  2. Deklarieren Sie ein inneres div, das tatsächlich die Tabelle enthält (ich nenne es wrapper).
  3. Deklarieren Sie den Tisch selbst im Inneren wrapper div.
  4. Wenden Sie die CSS-Transformation an, um den “Registrierungspunkt” des Wrapper-Objekts in seine 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 loswerden, da dieser Stil nicht direkt auf Tabellen funktioniert, also verwende ich ein Div, um es zu umschließen und zu positionieren, während die Tabelle innerhalb des Div fließt.

Benutzer-Avatar
John Slegers

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

Der Außenbehälter:

  • sollte haben display: table;

Der Innenbehälter:

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

Die Inhaltsbox:

  • sollte haben display: inline-block;

Wenn Sie diese Technik verwenden, fügen Sie einfach Ihre Tabelle (zusammen mit allen anderen Inhalten, die Sie dazu hinzufügen möchten) zur Inhaltsbox 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!

Benutzer-Avatar
redbmk

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

1005970cookie-checkSo positionieren Sie eine Tabelle horizontal und vertikal in der Mitte von div

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy