

CSS Challenge - webuiarchitect
http://goo.gl/y1l8

======
webuiarchitect
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.

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

@faramarz, once again, thank you very much for spending time on this.

------
faramarz
Done! Works in every single browser.

    
    
      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 */
     }
    

Live demo <http://www.faramarzhashemi.com/valign.html>

