Cara memposisikan meja di tengah div secara horizontal & vertikal

Kita dapat mengatur gambar sebagai gambar latar belakang <div>seperti:

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

Saya perlu mengatur meja di tengah secara <div>horizontal & vertikal. Apakah ada solusi lintas-browser yang digunakan CSS?

Pemusatan adalah salah satu masalah terbesar dalam CSS. Namun, ada beberapa trik:

Untuk memusatkan meja Anda secara horizontal, Anda dapat mengatur margin kiri dan kanan untuk otomatis:

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

Untuk memusatkannya secara vertikal, satu-satunya cara adalah menggunakan javascript:

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

Tidak vertical-align:middlemungkin karena tabel adalah blok dan bukan elemen inline.

Edit

Berikut adalah situs web yang merangkum solusi pemusatan CSS: http://howtocenterincss.com/

Inilah yang bekerja untuk saya:

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

#table {
  align-self: center;
}

Dan ini selaras secara vertikal dan horizontal.

Untuk posisi pusat secara horizontal dapat Anda katakan width: 50%; margin: auto;. Sejauh yang saya tahu, itu cross browser. Untuk penyelarasan vertikal Anda dapat mencoba vertical-align:middle;, tetapi itu hanya dapat berfungsi dalam kaitannya dengan teks. Ini patut dicoba.

Tambahkan saja margin: 0 auto;ke table. Tidak perlu menambahkan properti apa pun kediv

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

Catatan: Menambahkan warna latar belakang ke div untuk memvisualisasikan perataan tabel ke pusatnya

Selain itu, jika Anda ingin memusatkan secara horizontal dan vertikal - alih - alih memiliki desain aliran (dalam kasus seperti itu, solusi sebelumnya berlaku) - Anda dapat melakukan:

1. Deklarasikan div utama sebagai absoluteatau relativepenentuan posisi (saya menyebutnya content).
2. Deklarasikan div batin, yang benar-benar akan memegang tabel (saya menyebutnya wrapper).
3. Deklarasikan tabel itu sendiri, di dalam wrapperdiv.
4. Terapkan transformasi CSS untuk mengubah "titik registrasi" objek pembungkus ke pusatnya.
5. Pindahkan objek pembungkus ke pusat objek induk.

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

Catatan: Anda tidak dapat menyingkirkan div pembungkus, karena gaya ini tidak bekerja secara langsung di atas tabel, jadi saya menggunakan div untuk membungkusnya dan memposisikannya, sementara tabel dialirkan di dalam div.

Anda dapat memusatkan kotak baik secara vertikal maupun horizontal, menggunakan teknik berikut:

Wadah outher:

• harus punya display: table;

Wadah batin:

• harus punya display: table-cell;
• harus punya vertical-align: middle;
• harus punya text-align: center;

Kotak konten:

• harus punya display: inline-block;

Jika Anda menggunakan teknik ini, cukup tambahkan tabel Anda (bersama dengan konten lain yang ingin Anda ikuti) ke kotak konten.

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>

Lihat juga Fiddle ini !

Saya menemukan bahwa saya harus memasukkan

body { width:100%; }

untuk "margin: 0 auto" berfungsi untuk tabel.