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

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?

This question is related to css

The answer is


I discovered that I had to include

body { width:100%; }

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


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.


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 :

_x000D_
_x000D_
body {_x000D_
    margin : 0;_x000D_
}_x000D_
_x000D_
.outer-container {_x000D_
    position : absolute;_x000D_
    display: table;_x000D_
    width: 100%;_x000D_
    height: 100%;_x000D_
    background: #ccc;_x000D_
}_x000D_
_x000D_
.inner-container {_x000D_
    display: table-cell;_x000D_
    vertical-align: middle;_x000D_
    text-align: center;_x000D_
}_x000D_
_x000D_
.centered-content {_x000D_
    display: inline-block;_x000D_
    background: #fff;_x000D_
    padding : 20px;_x000D_
    border : 1px solid #000;_x000D_
}
_x000D_
<div class="outer-container">_x000D_
   <div class="inner-container">_x000D_
     <div class="centered-content">_x000D_
        <em>Data :</em>_x000D_
        <table>_x000D_
            <tr>_x000D_
                <th>Name</th>_x000D_
                <th>Age</th>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Tom</td>_x000D_
                <td>15</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Anne</td>_x000D_
                <td>15</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Gina</td>_x000D_
                <td>34</td>_x000D_
            </tr>_x000D_
        </table>_x000D_
     </div>_x000D_
   </div>_x000D_
</div>
_x000D_
_x000D_
_x000D_

See also this Fiddle!


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.

_x000D_
_x000D_
#content {_x000D_
  width: 5em;_x000D_
  height: 5em;_x000D_
  border: 1px solid;_x000D_
  border-color: red;_x000D_
  position: relative;_x000D_
  }_x000D_
_x000D_
#wrapper {_x000D_
  width: 4em;_x000D_
  height: 4em;_x000D_
  border: 3px solid;_x000D_
  border-color: black;_x000D_
  position: absolute;_x000D_
  left: 50%; top: 50%; /*move the object to the center of the parent object*/_x000D_
  -webkit-transform: translate(-50%, -50%);_x000D_
  -moz-transform: translate(-50%, -50%);_x000D_
  -ms-transform: translate(-50%, -50%);_x000D_
  -o-transform: translate(-50%, -50%);_x000D_
  transform: translate(-50%, -50%);_x000D_
  /*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*/_x000D_
  }_x000D_
_x000D_
table {_x000D_
  width: 100%;_x000D_
  height: 100%;_x000D_
  border: 1px solid;_x000D_
  border-color: yellow;_x000D_
  display: inline-block;_x000D_
  }
_x000D_
<div id="content">_x000D_
    <div id="wrapper">_x000D_
        <table>_x000D_
        </table>_x000D_
    </div>_x000D_
</div>
_x000D_
_x000D_
_x000D_

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.


Here's what worked for me:

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

#table {
  align-self: center;
}

And this aligned it vertically and horizontally.


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

_x000D_
_x000D_
<div style="background-color:lightgrey">_x000D_
 <table width="80%" style="margin: 0 auto; border:1px solid;text-align:center">_x000D_
    <tr>_x000D_
      <th>Name </th>_x000D_
      <th>Country</th>_x000D_
    </tr>_x000D_
    <tr>_x000D_
      <td>John</td>_x000D_
      <td>US </td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
      <td>Bob</td>_x000D_
      <td>India </td>_x000D_
    </tr>_x000D_
 </table>_x000D_
<div>
_x000D_
_x000D_
_x000D_

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