How to vertically and horizontally center text in an unordered list or div

Congratulations if you've managed to find this tutorial! I've been trying to increase awareness and publicity to this tutorial by going to other tutorials and leaving comments but I'm finding the authors take a competitive edge and do not approve my link to this page. If you find this helpful then please promote it by using the social links further down the page. This should hopefully increase my chances to be found in Google.

The following example shows you how to vertically and horizontally center text in both an unordered list and a div without resorting to JavaScript or css line heights. No matter how much text you have you won't have to apply any special classes to specific lists or divs (the code is the same for each). This works on all major browsers including IE9, IE8, IE7, IE6, Firefox, Chrome, Opera and Safari. There are 2 special stylesheets (1 for IE7 and another for IE6) to help them along due to their css limitations which modern browsers don't have.

If you simply wish for it to work in a div, remove the list items around it (the code will still work).

UPDATE, the code has been altered slightly as of 29/9/2011 to make it easier to work with.

Alternatively, you can download the zip here.