How can I center an unordered list with dynamic content within div?

http://stackoverflow.com/questions/8734503/how-can-i-center-an-unordered-list-with-dynamic-content-within-div/

by Wexcode

HTML

<div>
    <span id="alignment"></span><ul>
        <li><a href="#">Element 1</a></li>
        <li><a href="#">Element 2</a></li>
        <li><a href="#">Element 3</a></li>
        <li><a href="#">Element 4</a></li>
    </ul>
</div>

CSS

div { 
    background: blue;
    width: 300px; 
    height: 300px; }
#alignment {
    height: 100%;
    vertical-align: middle;
    display: inline-block; }
ul {
    padding: 0;
    list-style: none;
    vertical-align: middle; 
    display: inline-block; }
a { color: #fff; }