4 ms·
CSS Challenge
- faramarz 16y agoDone! 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 http://www.faramarzhashemi.com/valign.html
- webuiarchitect 16y agoThanks @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.