How to center a table of the screen (vertically and horizontally)

Question

I have these code block:

<table border="1px">
<tr>
<td>
my content
</td>
</tr>
</table>

I'd like to show my table in the center of the screen (vertically and horizontally).

Here is a demo.

How can I do that?

Answer 1

Horizontal centering is easy. You just need to set both margins to "auto":

table {
  margin-left: auto;
  margin-right: auto;
}

Vertical centering usually is achieved by setting the parent element display type to table-cell and using vertical-align property. Assuming you have a <div class="wrapper"> around your table:

.wrapper {
  display: table-cell;
  vertical-align: middle;
}

More detailed information may be found on http://www.w3.org/Style/Examples/007/center

If you need support for older versions of Internet Explorer (I do not know what works in what version of this strange and rarely used browser ;-) ) then you may want to search the web for more information, like: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html (just a first hit, which seems to mention IE)

Answer 2

This fixes the box dead center on the screen:

HTML

<table class="box" border="1px">
    <tr>
        <td>
            my content
        </td>
    </tr>
</table>

CSS

.box {
    width:300px;
    height:300px;
    background-color:#d9d9d9;
    position:fixed;
    margin-left:-150px; /* half of width */
    margin-top:-150px;  /* half of height */
    top:50%;
    left:50%;
}

View Results

http://jsfiddle.net/bukov/wJ7dY/168/