Okay, so today I came across an issue where I needed to vertically align a block of text on a webpage when the text length can vary drastically meaning padding / line height wouldn’t do the trick.

After trying a few ideas with no success I stumbed across a great way to do it working in the following browsers:

  • Internet Explorer (haven’t tested lower than IE8 yet!)
  • Chrome
  • Firefox
  • Safari
  • Opera

Below is a simple example of how I went about doing this in CSS:




    This text will be centred

Below is the same CSS as above on a live working demo:

This text will be centred
This is a lot longer and despite wrapping onto more lines will still be centred

Happy coding and please post up links to any sites you use this on for the benefit of others