Vertical centering has always been a fairly elusive goal when dong CSS layouts, but it's actually easier to achieve than you might think. Here are the two simplest methods that I know of to achieve this goal.
I recently had to create an interview test for a developer who has good skill in PHP, but is not so experienced when it comes to front-end coding. On the front-end side of things, the job they were interviewing for required decent HTML & CSS knowledge. With that in mind I created a little test to evaluate their skills - I'm posting it here for anyone else who needs something similar.
When I receive the final PSDs from a designer I invariably want to reach through my computer and slap him for making my life difficult. With very few exceptions, there will almost always be at least one design element that is frustratingly hard to achieve using HTML and CSS (no matter how easy the designer may think it will be). The new properties available in CSS3 have reduced this frustration thankfully, but from time to time there are problems that crop up.
The need to hide elements in an HTML document is fairly common, especially when dealing with things like drop-down menus, so here's a run-down of the two best (and only properly semantic) ways to do this using simple CSS properties.
When working with CSS, I have constantly encountered one particular property that is grossly misused - the
position property. If you check out the source of almost any website you will see plenty of elements with randomly defined position properties. I just thought I'd clear up some of the confusion, as understanding this property will make your life significantly easier when creating layouts.