How to vertically center a <span> inside a div?

See my article on understanding vertical alignment. There are multiple techniques to accomplish what you want at the end of the discussion.

(Super-short summary: either set the line-height of the child equal to the height of the container, or set positioning on the container and absolutely position the child at top:50% with margin-top:-YYYpx, YYY being half the known height of the child.)

At your parent DIV add

display:table;

and at your child element add

 display:table-cell;
 vertical-align:middle;