Vertical centring of several divs inside another

by andfinally

HTML

<div style="width:800px;">
    
    <div class="author-page-box">
        <img src="http://placekitten.com/200/300" class="default-author author-img aub-img">
        <div class="aub-main">
            <h1> Author name </h1>
            <div class="aub-desc">Donec vitae mi pulvinar, vulputate tortor ut, consectetur leo. </div>
        </div>
        <!-- .aub-main -->
        <div class="aub-contact-links">
            <ul>
                <li>
                    <a href="http://facebook.com/asdf" target="_blank" class="facebook"><span class="aub-icon"></span>Facebook</a>
                </li>
                <!--<li>
                    <a href="http://twitter.com/metroukadminguest" target="_blank" class="twitter"><span class="aub-icon"></span>Twitter</a>
                </li>
                <li>
                    <a href="https://plus.google.com/123456/posts" target="_blank" class="google" rel="me"><span class="aub-icon"></span>Google+</a>
                </li>
                <li>
                    <a href="http://asdf.com" target="_blank" class="website"><span class="aub-icon"></span>Website</a>
                </li>-->
            </ul>
        </div>
        <!-- .aub-contact-links -->
    </div>
    <!-- .author-page-box -->
    
</div>

CSS

ul {
    list-style: none;
}

.author-page-box {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  min-height: 300px;
  margin-bottom: 30px;
  background: #eaeaea;
  padding: 40px;
  width:330px;
}

.author-page-box:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em;
}

.aub-main {
  width: 250px;
  margin-right: 30px;
  outline: 1px solid green;
  font-size: 20px;
  line-height: 1.3;
}

.aub-main h1 {
  margin-bottom: 0.4em;
  font-family: 'CorpidBold', Arial, Helvetica, sans-serif;
  font-size: 30px;
  color: #aaa;
}

.aub-img {
  width: 130px;
  height: 130px;
  margin-right: 30px;
  -webkit-border-radius: 65px;
  -moz-border-radius: 65px;
  -ms-border-radius: 65px;
  -o-border-radius: 65px;
  border-radius: 65px;
  border: 3px solid white;
}

.sponsored-author .aub-img {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;
}

.aub-contact-links {
  outline: 1px solid blue;
}

.aub-contact-links a {
  display: block;
  width: 180px;
  height: 50px;
  padding: 10px 20px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  color: white;
}

.aub-contact-links li:last-child {
  margin-bottom: 0;
}

.aub-contact-links a:hover {
  text-decoration: none;
}

.aub-contact-links .facebook {
  background: #3b5998;
}

.aub-contact-links .twitter {
  background: #17abed;
}

.aub-contact-links .google {
  background: #dd4b39;
}

.aub-contact-links .website {
  background: #6cb42c;
}

.aub-img,
.aub-main,
.aub-contact-links {
  display: inline-block;
  vertical-align: middle;
}