Question

The page is here. The source is pretty straightforward. I’ve tried doing this with absolute positioning and a few other methods, none of them turn out exactly right.

Answer 1

See here: http://jsfiddle.net/yXUdN/

I changed these:

#title {
    position:absolute;
    width:240px;
    height:240px;
    z-index:99;
}
#space-link {
    position:absolute;
    margin:auto;
    top:40%;
    left:30%;
    font-family: 'Josefin Slab', serif;
    font-size:2em;
    color:#FFF;
    z-index:99;
}

To this:

#title {
}
#space-link {
    font-family: 'Josefin Slab', serif;
    font-size:2em;
    color:#FFF;
    text-align:center; /* horizontal center */
    line-height:240px; /* vertical center */
}​

You can also use the display:table rules to accomplish this, which would be better in the cases where the text spans multiple lines: http://jsfiddle.net/yXUdN/1/

.space-button {
    ...
    display:table;
}
#title {
    display:table-row;
}
#space-link {
    ...
    vertical-align:middle;
    text-align:center;
    display:table-cell;
}​

Also, you shouldn’t have multiple elements with the same ID. Use classes instead.