Element vertically aligned to the middle

Uses an inline-block element hidden with a negative margin to vertically-align an element to the middle of another element. Note: `display: inline-block;`, `:before`, and `> *` are not supported natively in IE6-7, so look for a good IE fix if support for those versions is necessary.

HTML

<script src="http://fonts.googleapis.com/css?family=Ubuntu"></script>
<div class="verticallyCentered" style="height: 300px;"><ul class="menu">
    <li><a href="#">List Item #0</a></li>
    <li><a href="#">List Item #1</a></li>
</ul></div>

CSS

.verticallyCentered {
    display: inline-block;
    border: 2px solid #ccc;
    
    text-align: center;
    overflow: hidden;
}
.verticallyCentered:before {
    content: '';
    display: inline-block;
    height: 100%;
    width: 100%;
    margin-left: -100%;
    vertical-align: middle;
}
.verticallyCentered > * {
    vertical-align: middle;
    display: inline-block;
}

/* Make me pretty… */
body {
    font: 12px Ubuntu, Arial, sans-serif;
    margin: 20px;
    text-align: center;
}

.verticallyCentered {
    box-shadow: 0 0 200px -20px rgba(0, 0, 0, .1) inset;
}

a {
    color: #333;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

.menu {
    padding: 1em;
}

JavaScript

4