Stacking three divs and centering them vertically?

This question may have already been answered, but I didn't see anything regarding it while searching, and I'm having a hard time understanding the many ways of centering div's.

Basically, I'm building a small portfolio site and would like to have it laid out in a two column format. The left column will house my logo, and the right column will have a series of three links, which I would like to stack vertically and then also center. I cannot for the life of me, figure out the CSS to get this to work. Here's what I have so far:

<div class="row main">
        <div class="col-xs-6 leftMain">
            <img src="img/logo.png" class="logo" alt="myName">
        </div>
        <div class="col-xs-6 rightMain">
           <div class="resume button"><a href="resume.html" class="btn">Resume</a></div>
           <div class="portfolio button"> <a href="portfolio.html" class="btn">Portfolio</a></div>
           <div class="contact button"><a href="mailto:me@me.com" class="btn">Contact</a></div>
        </div>
    </div>

And my CSS:

.main {
    display: flex;
}

.leftMain {
    display: inline-block;

}

.rightMain {
    display: inline-block;

}

.logo {
    display: table;
    margin: 0 auto;
}

.button {
    display: table;
    margin: 0 auto;
}

This works reasonably well, but the links in rightMain do not center vertically. As most of the solutions I've looked up involve the display property, I figured I may as well just ask the full question, rather than trying to integrate multiple solutions for different centering problems. I plan on making it responsive eventually, having the right column move beneath the left on smaller windows. Any ideas?