Paul_o_b - 8:39 am on Aug 8, 2012 (gmt 0)
If we return to the original question:
Why doesn't CSS have a simple way to vertically align within a div similar to the way valign works in a table?
Then the answer I gave above does exactly that although it may not be quite as a simple but is by no means difficult. It behaves in the same way that it would in a table because it is mimicking the table structure as it was designed to do.
When you use display:table-cell the browser in fact automatically creates the table wrapper thus saving on equivalent html had you used a table in that situation.
You will have to explain where that method breaks compared to the same method in a table as I can't see an obvious difference?
The display:table properties don't cover all the aspects of tables (colspan, rowspan etc) but for vertical alignment and equal columns they work in much the same way.
It is effectively one line of html and less html than would be needed for the table counterpart as mentioned above!
The css is of course only effectively two lines : "vertical-align:middle and display:table-cell". The rest of the css is for the structure and display and can't be seen as part of the solution.
As alt131 said it is not in any sense a hack and is doing the exact job it was designed to do. I don't really understand this misconception. The display:table properties were never meant to be for tabular data but as a way of providing some of the features of tables such as vertical-align and equal columns.
However, after saying all that I do understand where you are coming from. It would indeed have been useful if margin:auto would vertically center an element inside its container in the same way that it centers horizontally but the problem is that height is a complicated subject. An auto height element has no height so the element cannot really be vertically centred, however once you give the element a height then it cannot grow unlike table-cells that treat height as a minimum. This means you'd be looking for specific cases of when an element has a fixed height and then saying please vertically center the child div. I'm sure this could have been overcome with a bit of thought but CSS was such a drastic change from what went before that there were bound to be a few holes that needed to be plugged. We are indeed still waiting for the perfect layout tool but CSS3 shows much promise.
As alt31 points out css3 does address these issues in more details but as to your original question then the display:table-cell properties from css2 do already address this issue.
It may be helpful if you have a specific scenario in mind and we can discuss the options available.