Jak ustawić stół na środku div w poziomie i w pionie

Możemy ustawić obrazek jako obraz tła <div>typu:

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

Muszę ustawić stół na środku w <div>pionie i poziomie. Czy istnieje rozwiązanie obsługujące wiele przeglądarek CSS?

Centrowanie jest jednym z największych problemów w CSS. Istnieją jednak pewne sztuczki:

Aby wyśrodkować tabelę w poziomie, możesz ustawić lewy i prawy margines na automatyczny:

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

Aby wyśrodkować go w pionie, jedynym sposobem jest użycie javascript:

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

Nie vertical-align:middlejest możliwe, ponieważ tabela jest blokiem, a nie elementem wbudowanym.

Edytować

Oto witryna podsumowująca rozwiązania dotyczące centrowania CSS: http://howtocenterincss.com/

Oto, co zadziałało dla mnie:

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

#table {
  align-self: center;
}

I to wyrównało go w pionie i poziomie.

Aby ustawić poziomo środek, możesz powiedzieć width: 50%; margin: auto;. O ile wiem, to cross browser. W przypadku wyrównania w pionie możesz spróbować vertical-align:middle;, ale może to działać tylko w odniesieniu do tekstu. Warto jednak spróbować.

Po prostu dodaj margin: 0 auto;do swojego table. Nie ma potrzeby dodawania żadnej właściwości dodiv

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

Uwaga: Dodano kolor tła do elementu div, aby zwizualizować wyrównanie tabeli do jej środka

Dodatkowo, jeśli chcesz wyśrodkować zarówno w poziomie, jak i w pionie - zamiast projektowania przepływu (w takich przypadkach mają zastosowanie poprzednie rozwiązania) - możesz zrobić:

1. Zadeklaruj główny div jako absolutelub relativepozycjonowanie (ja to nazywam content).
2. Zadeklaruj wewnętrzny element div, który faktycznie będzie zawierał tabelę (ja to nazywam wrapper).
3. Zadeklaruj samą tabelę, wewnątrz elementu wrapperdiv.
4. Zastosuj transformację CSS, aby zmienić „punkt rejestracji” obiektu opakowania na jego środek.
5. Przenieś obiekt opakowania na środek obiektu nadrzędnego.

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

Uwaga: nie można pozbyć się opakowującego elementu div, ponieważ ten styl nie działa bezpośrednio na tabelach, więc używam elementu div, aby go zawinąć i ustawić, podczas gdy tabela jest przepuszczana wewnątrz elementu div.

Możesz wyśrodkować pudełko zarówno w pionie, jak iw poziomie, używając następującej techniki:

Zewnętrzny pojemnik:

• powinien mieć display: table;

Pojemnik wewnętrzny:

• powinien mieć display: table-cell;
• powinien mieć vertical-align: middle;
• powinien mieć text-align: center;

Pole zawartości:

• powinien mieć display: inline-block;

Jeśli używasz tej techniki, po prostu dodaj swoją tabelę (wraz z innymi treściami, które chcesz z nią połączyć) do pola zawartości.

Próbny :

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>

Zobacz też to Fiddle !

Odkryłem, że muszę to uwzględnić

body { width:100%; }

aby „margin: 0 auto” działało dla tabel.