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

Question

We can set a image as background image of a  lt div gt  like    lt style gt       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           lt  style gt    lt div id  test  gt  lt  div gt    I need to set a table at the center of a  lt div gt  horizontally  amp  vertically  Is there a cross-browser solution using CSS

User · Answer

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_

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_

See also this Fiddle!

User · Answer

Just add margin  0 auto  to your table  No need of adding any property to div   x000D   x000D   lt div style  background-color lightgrey  gt  x000D    lt table width  80   style  margin  0 auto  border 1px solid text-align center  gt  x000D       lt tr gt  x000D         lt th gt Name  lt  th gt  x000D         lt th gt Country lt  th gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt John lt  td gt  x000D         lt td gt US  lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Bob lt  td gt  x000D         lt td gt India  lt  td gt  x000D       lt  tr gt  x000D    lt  table gt  x000D   lt div gt  x000D   x000D   x000D    Note  Added background color to div to visualize the alignment of table to its center

User · Answer

Here s what worked for me    div     display  flex    justify-content  center      table     align-self  center      And this aligned it vertically and horizontally

User · Answer

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    Declare the main div as absolute or relative positioning  I call it content   Declare an inner div  which will actually hold the table  I call it wrapper   Declare the table itself  inside wrapper div  Apply CSS transform to change the  registration point  of the wrapper object to it s center  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   lt div id  content  gt  x000D       lt div id  wrapper  gt  x000D           lt table gt  x000D           lt  table gt  x000D       lt  div gt  x000D   lt  div gt  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

User · Answer

I discovered that I had to include  body   width 100       for  margin  0 auto  to work for tables

User · Answer

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

User · Answer

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    lt style gt     test       width 100       height 100         table       margin  0 auto     or margin  0 auto 0 auto         lt  style gt    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

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

The outher container :

The inner container :

The content box :

Demo :

Examples related to css