Today I learned about two new CSS3 rules that both work in newish webkit (Chrome/Safari) browsers. We can FINALLY vertically align elements in a div, without resorting to use/simulating of tables, by using box-sizing. About freaking time. And you can now also resize elements in the client. I clearly need to read up more on what’s coming in CSS3…
Example (you'll need a newish webkit (Chrome/Safari) browser):
You can resize the div below – see how the image always stays centered?
<div style="display: -webkit-box; -webkit-box-align: center; -webkit-box-pack: center; resize: both; overflow: hidden; width: 200px; height: 200px; background-color: black;"> <img src="http://www.appliedis.com/images/tagline_01.gif" style="max-width:100%; max-height: 100%">