Craft Web Design + Development
Brendan McKeown

Hey there. I’m a front-end developer and web designer. I'm all about creating websites and web apps that look and perform flawlessly on any device using HTML, CSS, and Javascript. I enjoy utilizing libraries, frameworks and preprocessors that improve efficiency and reduce confusion.

Check out my resume.

Vertically Center Element with Unknown Height

Vertically centering an element with a known height is relatively easy – it's when you don't know the height of said element when things start getting tricky. Luckily, there's an easy way to center these mysterious elements using psuedo elements, inline blocks, and vertical alignment. Unfortunately, this method does not work when either parent or child element is floated.

.container:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.child {
    display: inline-block;
    vertical-align: middle;
}

If the either elements are floated, an alternative method to vertically center the child element is to use the table and table-cell display options.

.container:before {
    display: table;
}

.child {
    display: table-cell;
    vertical-align: middle;
}