Question

I have searched a lot for centering a div, both horizontally and vertically, this is the method given everywhere:

div {
position:fixed;
top:50%;
left:50%;
margin-left:(div width/2)
margin-top: (div height/2)
}

I just found a new solution to centering a div, both horizontally and vertically, by wrapping it inside a table. I’ve tested it in ie7 and above, plus other browsers.

Here is an example : http://jsbin.com/ocenok/2/

I was wondering that the first method is found everywhere on the internet, SO, etc. and requires beforehand knowledge of width and height, or is usually calculated via Javascript.

The table approach seems flawless, and requires neither javascript, nor fixed height/width.

Are there any drawbacks to the table approach ?

(I do not know the height/width of the div that I want to center.)

---

Update (To make my question clearer) :

I myself hate using tables for non-tabular/layout data.

1. I know that what I want can easily be achieved using Javascript.
2. I figured I can achieve this using display:table, killing IE7 support.

But what I’m trying to understand is, that when I can achieve this using a single <table> element, what are the drawbacks, if any.

Checking Answers here and on similar questions, no one has recommended this method, even though it uses all valid HTML elements and syntax and rules.

If everyone is recommending to use javascript to handle presentation, even though it is easily possible using CSS, it must have some drawbacks.

---

Code :

  <table>
    <tr>
        <td>
            <div>This is div that needs to be centered.</div>
        </td>
    </tr>
</table>

and then apply the following CSS

table {
    width:100%;
    height:100%;
    position:fixed;
    top:0;
    left:0;
}

table td {
    width : 100%;
    text-align: center;
}

div {
    width:100px;
    height:100px;
    background:pink;
  margin: 0 auto;
}

Answer 1

There are different reasons why you should not use tables. Some which have already been discussed here. I understand that you are only using one row and you will hopefully try to keep your promise to not add any rows but if you come to break that promise, some of the reasons below will show a lot more significance, like the rendering speed and the screen reader issue. That’s exactly why they call somethings standard and some not. Standards take everything and every situation into account.

Rendering speed issue:

One of the biggest drawbacks of tables is the way they are rendered by browsers. The inside of the table must be loaded before the position and size of the table can be exactly determined. This may cause problems if you are going to have a lot of information in the table.

Validness and standards:

Using tables for non-tabular data means you are writing invalid X/HTML. Which may be fine for some. But I don’t recommend. See here

SEO:

I didn’t know this before I did a search on some other less heard issues with using tables.

Search engines love valid code, so by not using tables it helps with
Search Engine Optimization (SEO).

See here for more info on this

Problems for screen readers and Braille displays:

Tables can’t be used easily in screen readers. Check this article.

If you must use a table for layout, remember that screen readers and
Braille displays read tables row-by-row across the columns. The TAB
order also goes through the table in this way. So make sure that your
table structure makes sense when reading from left to right,
row-by-row.

On the + side:

I hate to admit that if you honestly use just that one table with one row and one column and with a very small amount of data inside (which I would call a limitation) then the page would probably render faster than the time you use Javascript but the other issues remain.

---