How to center a table of the screen vertically and horizontally

Question

I have these code block    lt table border  1px  gt   lt tr gt   lt td gt  my content  lt  td gt   lt  tr gt   lt  table gt    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

User · Accepted Answer

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/

User · Answer

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  lt div class  wrapper  gt  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

User · Answer

For horizontal alignment  No CSS   Just insert an align attribute inside the table tag   lt table align  center  gt  lt  table

User · Answer

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    lt table height 100  width 100  gt   lt td align center valign center gt     add your table here    lt  td gt   lt  table gt    the align and valign put the table exactly in the middle of the screen  no matter what else is going on

User · Answer

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

User · Answer

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  Alternatively  use a flex container    parent-element       display  flex      justify-content  center      align-items  center

User · Answer

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

User · Answer

I think this should do the trick    lt table border  1px  align  center  gt    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

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

Examples related to html

Examples related to html-table