CSS3 Fun

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?

Source:

<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%">