Thanks @faramarz a lot for the try. I cannot say that it doesn't work; it definitely does. The thing is, this solution cannot be accepted as generic. I couldn't explain all the conditions in the twitter post; my mistake. But it was rather a sarcastic post. If someone would want to try for a generic solution:
1) Horizontal centering isn't necessary. So let the DIV width occupy all the available width.
2) The height cannot be fixed. The content can vary.<p>I doubt if there exist any solution to this. My point is, if we are talking about Clones, Moon, Rocket Science and HTML5, a simple thing like this is not possible even today. If CSS can offer margin: 0 auto; why can't it offer something to align elements vertically center? May be, margin: auto 0;???<p>@faramarz, once again, thank you very much for spending time on this.
Done! Works in every single browser.<p><pre><code> div {
background: red;
width: 250px;
height: 250px;
top: 50%;
left: 50%;
position: absolute;
margin: -125px 0 0 -125px; /* Width of Element / 2 = Negative Left Margin
Height of Element / 2 = Negative Top Margin */
}
</code></pre>
Live demo <a href="http://www.faramarzhashemi.com/valign.html" rel="nofollow">http://www.faramarzhashemi.com/valign.html</a>