How to position a table at the center of div horizontally & vertically

Question

We can set a image as background image of a <div> like:

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

I need to set a table at the center of a <div> horizontally & vertically. Is there a cross-browser solution using CSS?

Answer 1

Centering is one of the biggest issues in CSS. However, some tricks exist:

To center your table horizontally, you can set left and right margin to auto:

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

To center it vertically, the only way is to use javascript:

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

No vertical-align:middle is possible as a table is a block and not an inline element.

Edit

Here is a website that sums up CSS centering solutions: http://howtocenterincss.com/

Answer 2

Here's what worked for me:

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

#table {
  align-self: center;
}

And this aligned it vertically and horizontally.

Answer 3

To position horizontally center you can say width: 50%; margin: auto;. As far as I know, that's cross browser. For vertical alignment you can try vertical-align:middle;, but it may only work in relation to text. It's worth a try though.

Answer 4

Just add margin: 0 auto; to your table. No need of adding any property to div

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

Note: Added background color to div to visualize the alignment of table to its center

Answer 5

Additionally, if you want to center both horizontally and vertically -instead of having a flow-design (in such cases, the previous solutions apply)- you could do:

1. Declare the main div as absolute or relative positioning (I call it content).
2. Declare an inner div, which will actually hold the table (I call it wrapper).
3. Declare the table itself, inside wrapper div.
4. Apply CSS transform to change the "registration point" of the wrapper object to it's center.
5. Move the wrapper object to the center of the parent object.

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

Note: You cannot get rid of the wrapper div, since this style does not work directly on tables, so I use a div to wrap it and position it, while the table is flowed inside the div.

Answer 6

You can center a box both vertically and horizontally, using the following technique :

The outher container :

• should have display: table;

The inner container :

• should have display: table-cell;
• should have vertical-align: middle;
• should have text-align: center;

The content box :

• should have display: inline-block;

If you use this technique, just add your table (along with any other content you want to go with it) to the content box.

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>

See also this Fiddle!

Answer 7

I discovered that I had to include

body { width:100%; }

for "margin: 0 auto" to work for tables.

Answer 8

As I can't comment yet, I will post my comment to jdlin here. If you want to accomplish this without styling the table itself, you could do:

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

Answer 9

Using simple javascript at the bottom after loading finishes ...

  <script>
    var div = document.getElementById("test");
    var table = document.getElementById("tabel");
    var tableMarginTop = Math.round( (div.offsetHeight - table.offsetHeight) / 2 );
    document.getElementById("tabel").style["margin-top"] = tableMarginTop;
  </script>