Bir tabloyu yatay ve dikey olarak div'in merkezine yerleştirme

Bir resmi, bir <div>benzerinin arka plan resmi olarak ayarlayabiliriz :

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

<div>Yatay ve dikey olarak ortasına bir masa kurmam gerekiyor. Kullanan bir çapraz tarayıcı çözümü var CSSmı?

Merkezleme, CSS'deki en büyük sorunlardan biridir. Ancak bazı püf noktaları vardır:

Tablonuzu yatay olarak ortalamak için, sol ve sağ kenar boşluğunu otomatik olarak ayarlayabilirsiniz:

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

Dikey olarak ortalamak için tek yol javascript kullanmaktır:

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

vertical-align:middleTablo bir blok olduğu ve satır içi bir öğe olmadığı için hayır mümkün değildir.

Düzenle

İşte CSS merkezleme çözümlerini özetleyen bir web sitesi: http://howtocenterincss.com/

İşte benim için çalıştı:

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

#table {
  align-self: center;
}

Ve bu onu dikey ve yatay olarak hizaladı.

Yatay olarak ortalamak için diyebilirsiniz width: 50%; margin: auto;. Bildiğim kadarıyla, bu çapraz tarayıcı. Dikey hizalama için deneyebilirsiniz vertical-align:middle;, ancak yalnızca metinle ilişkili olarak çalışabilir. Yine de denemeye değer.

Sadece eklemek margin: 0 auto;adresinden Müşteri table. Emlak eklemeye gerek yokdiv

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

Not: Tablonun ortasına hizalanmasını görselleştirmek için div'e arka plan rengi eklendi

Ek olarak, bir akış tasarımına sahip olmak yerine hem yatay hem de dikey olarak ortalamak istiyorsanız (bu gibi durumlarda, önceki çözümler geçerlidir) - şunları yapabilirsiniz:

1. Ana div'i absoluteya da relativekonumlandırma olarak bildirin (ben diyorum content).
2. Aslında masayı tutacak bir iç div bildirin (ben buna diyorum wrapper).
3. wrapperDiv içinde tablonun kendisini bildirin.
4. Sarmalayıcı nesnenin "kayıt noktasını" merkeze değiştirmek için CSS dönüşümü uygulayın.
5. Sarmalayıcı nesnesini üst nesnenin merkezine taşıyın.

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

Not: Bu stil doğrudan tablolar üzerinde çalışmadığından sarmalayıcı div'den kurtulamazsınız, bu yüzden tablo div içinde akarken onu sarmak ve konumlandırmak için bir div kullanıyorum.

Aşağıdaki tekniği kullanarak bir kutuyu hem dikey hem de yatay olarak ortalayabilirsiniz:

Diğer konteyner:

• sahip olmalı display: table;

İç kap:

• sahip olmalı display: table-cell;
• sahip olmalı vertical-align: middle;
• sahip olmalı text-align: center;

İçerik kutusu:

• sahip olmalı display: inline-block;

Bu tekniği kullanırsanız, tablonuzu (onunla gitmek istediğiniz diğer içeriklerle birlikte) içerik kutusuna eklemeniz yeterlidir.

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>

Ayrıca bu Fiddle'a bakın !

Dahil etmem gerektiğini keşfettim

body { width:100%; }

"margin: 0 auto" için tablolarda çalışmak üzere.