It's amazing how CSS lets you do stuff like this but still can't center things easily.

Nice demo by the way, but why on earth did you use an id rather than a class?

> It's amazing how CSS lets you do stuff like this but still can't center things easily.

It's trivial to do if you can use flexbox. And I do mean trivial, we're talking 3 properties including "opting into" flexbox: http://jsfiddle.net/1vd9xLdy/ (note: didn't bother with prefixes or older syntaxes so IE >= 11, Firefox >= 28, Chrome >= 29, Opera 12.1 or >= 19)

It's not vertically centered in the window, and that's using a CSS feature that's only fully-supported in IE11. This trickery is all box shadows and border radii, which go back to IE8.

Flex box is great, but it's interesting that CSS implemented gaussian blurred inset shadows and 3d transforms before it addressed centering (incompletely).

I once saw a jQuery plugin for something like that. Inspired me to make it with just CSS. The outcome is much like what you made.

http://jsfiddle.net/talmand/tb9NZ/

I now see that the jQuery plugin that inspired me now has a commercial license. I would have never considered monetizing something so easily created if you know how such things work. Granted, the jQuery plugin does have a few more features.