Expand div from the middle instead of just top and left using CSS

Question

I\'m not sure if this is possible, but I thought it would be cool using CSS transforms to create an effect where a div expands from its center to a predetermined height and

Answer 1

You'll have to transition it's position in order to do this as well, setting it to relative/absolute and changing the top value as it animates.

(edit based on comment)

Instead of absolute positioning, you could try to do the same sort of thing with a negative top margin. That would keep it in the document flow. Somehow, though, you need to actually move the div as well as animating the height/width.