How to center the screen table (vertically and horizontally)

Question

I have these blocks of code:

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

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

Here is a demo .

How can i do this?

Answer 1

This captures the dead center of the window 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/

Answer 2

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

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

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

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

More information can be found at http://www.w3.org/Style/Examples/007/center

If you need support for older versions of Internet Explorer (I don’t know what version of this strange and rarely used browser works ;-)), you may want to search the Internet for more information, for example: http: //www.jakpsatweb .cz / css / css-vertical-center-solution.html (just the first hit that IE seems to mention)

Answer 3

For horizontal alignment (no CSS)

Just insert the align attribute inside the table tag

 <table align="center"></table 

Answer 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 this does not work, go to the styles as indicated on the site.

Answer 5

I have been using this little cheat for a while. You can enjoy it. insert 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> 

align and valign place the table exactly in the middle of the screen, no matter what else happens.

Answer 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 sight even if you scroll down. see 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; } 

Answer 7

I tried using the align attribute in HTML5. It is not supported. I also tried flex-align and vertival-align with style attributes. Still unable to place the TABLE in the center of the screen. The following style sheet is centered horizontally.

style = "margin: automatic;"

Answer 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 an example