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?

score 22 · Answer 1 · answered Sep 17 '11 at 15:12

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)

The left/right centering part worked, but your instructions to center vertically seem to negate everything. Here is the code you gave and the results, everything ends up top-left of screen. Did I fill it out wrong? http://jsfiddle.net/wJ7dY/161/ — Bukov, Apr 09 '13 at 05:41
The wrapper needs to be larger than just the thing it is containing ;o) See http://jsfiddle.net/uLQZU/ — Jon Onstott, Feb 13 '14 at 17:24

score 15 · Accepted Answer · edited Apr 10 '13 at 08:25

15

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/

edited Apr 10 '13 at 08:25

Bukov

650
8
19

answered Sep 17 '11 at 15:25

Andres I Perez

75,075
21
157
138

2

Just a few notes: the `position:absolute` usually will be better than `fixed`, you may need to set the `position:relative` for the parent element, and there will be problems when the dimensions of the table will not be known. But if you _can_ set the dimensions, then this method is OK. – Arsen7 Sep 17 '11 at 15:49
Position fixed elements are relative to the window while absolute position elements are relative to the parent (which can also be the window, if positioned outside the main div), it is a lot easier to position something relative to the window than to some div in the case of login forms or popups so i went with that. – Andres I Perez Sep 17 '11 at 15:53
You are right. Fixed indeed will be better for login windows. – Arsen7 Sep 17 '11 at 16:04
No luck. This code centers horizontally, but not vertically. Am I doing something wrong? http://jsfiddle.net/wJ7dY/166/ – Bukov Apr 09 '13 at 05:51
1

@Bukov the comments posted above were not properly formatted for CSS so they were breaking the rest of the css. Here is a fixed version of your fiddle working with the comments removed: http://jsfiddle.net/wJ7dY/167/ – Andres I Perez Apr 09 '13 at 21:46
@AndresIlich /facepalm Oh man, I knew that, too. Thanks for the tip man, much appreciated :) I updated it one last time. the /* */ style comments should let him have the best of both worlds... is this correct now? http://jsfiddle.net/bukov/wJ7dY/168 – Bukov Apr 10 '13 at 08:10

score 5 · Answer 3 · answered Jun 22 '16 at 16:51

5

For horizontal alignment (No CSS)

Just insert an align attribute inside the table tag

<table align="center"></table

answered Jun 22 '16 at 16:51

user6500381

51
1
1

score 5 · Answer 4 · answered Sep 17 '11 at 14:17

5

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.

answered Sep 17 '11 at 14:17

kgrevehagen

514
6
20

score 3 · Answer 5 · answered Oct 22 '13 at 02:05

3

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.

answered Oct 22 '13 at 02:05

doug landmesser

31
1

This only works if you remove the !DOCTYPE of the following: Of course that is if you use an editor that adds this in by default. Drove me nuts one time trying this "cheat" and couldn't figure out why it wasn't working. – IamBatman Sep 09 '16 at 23:38

eicksl · Answer 6 · 2019-11-08T01:05:01.290

2

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;
}

edited Nov 08 '19 at 01:05

answered Nov 02 '18 at 15:13

eicksl

852
8
8

score 0 · Answer 7 · edited May 23 '17 at 12:34

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;
}

Pabitra Dash · Answer 8 · 2014-04-03T13:33:56.183

0

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;"

edited Apr 03 '14 at 13:33

answered Apr 03 '14 at 12:59

Pabitra Dash

1,461
2
21
28

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

8 Answers8

Linked