How to center a table of the screen (vertically an

问题:

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?

回答1:

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/

回答2:

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)

回答3:

For horizontal alignment (No CSS)

Just insert an align attribute inside the table tag

<table align="center"></table

回答4:

I think this should do the trick:

<table border="1px" align="center">

According to http://w3schools.com/tags/tag_table.asp this is deprecated, but try it. If it does not work, go for styles, as mentioned on the site.

回答5:

I've been using this little cheat for a while now. You might enjoy it. nest the table you want to center in another table:

<table height=100% width=100%>
<td align=center valign=center>

(add your table here)

</td>
</table>

the align and valign put the table exactly in the middle of the screen, no matter what else is going on.

回答6:

This guy had the magic wand we were looking for, guys.

To quote his answer:

just add "position:fixed" and it will keep it in view even if you scroll down. see it at http://jsfiddle.net/XEUbc/1/

#mydiv {
    position:fixed;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}

回答7:

I tried above align attribute in HTML5. It is not supported. Also I tried flex-align and vertival-align with style attributes. Still not able to place TABLE in center of screen. The following style place table in center horizontally.

style="margin:auto;"

回答8:

One way to center any element of unknown height and width both horizontally and vertically:

table {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

See Example