One of the oldest problems of CSS seems to be vertical aligning. Although there is the well-known
vertical-align property, you can’t just set
vertical-align: middle for a block and everything inside gets centered vertically. While there is still no “one-property-solution” we have a broad selection of techniques which enable to center things vertically.
While struggling with this problem today by myself I’ve googled a little bit and found a pretty neat solution which uses a pseudo-element. I didn’t know this technique yet. When I toyed around a little bit with it, I remembered another solution, which is even easier and just needs an additional line-height, which has the same value as the height of the container. Nothing else. You can see both methods at my demo..
Of course there are still other ones, whereby the most recent (and maybe also the cleanest to date) is Absolute Centering. If you don’t need to care about older browser, you can also use CSS3 transformations to get the desired outcome.
So I think we can stop complaining now that there is no proper solution to vertically align stuff. I you still can’t get enough, you can find even more solutions further down the page here.