堆叠三个div并垂直居中？

Question

这个问题可能已经得到了回答，但我在搜索时没有看到任何与此有关的问题，而且我很难理解以div为中心的许多方法。

基本上，我正在建立一个小型投资组合网站，并希望以两列格式进行布局。左栏将容纳我的徽标，右栏将有一系列三个链接，我想垂直堆叠然后也居中。我不能为我的生活，弄清楚CSS让这个工作。这就是我到目前为止所拥有的：

<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>

我的CSS：

.main {
    display: flex;
}

.leftMain {
    display: inline-block;

}

.rightMain {
    display: inline-block;

}

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

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

这样做效果相当不错，但是右边的链接不是垂直居中的。由于我查找的大多数解决方案都涉及显示属性，我想我也可以问完整的问题，而不是尝试针对不同的居中问题集成多个解决方案。我计划最终使其响应，在较小的窗口上使右列在左下方移动。有什么想法吗？

Answer 1

.rightMain div  {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

小提琴：https://jsfiddle.net/cnLav23u/

来源：http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

Answer 2

试试这个：http://jsfiddle.net/89jyvow0/3/

全屏：http://jsfiddle.net/89jyvow0/3/show/

的CSS：

* {
    margin: 0;
    padding: 0;
}
html, body {
    min-width: 500px;
    height: 100%;
}
body {
    font-size: 0;
}
.logo, .cont {
    font-size: 1rem;
    min-height: 100%;
    vertical-align: top;
    display: inline-block;
}
.logo {
    position: relative;
    width: 30%;
    background-color: #000;
    color: #fff;
}
.cont {
    position: relative;
    width: 70%;
}
.logo h1 {
    text-transform: uppercase;
    color: #fff;
    font-size: 3rem;
}
.wrap, .logo h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.wrap {
    width: 90%;
    min-width: 300px;
}
.wrap .box {
    text-transform: uppercase;
    margin: 30px 0px;
    width: 100%;
    border: 2px solid;
    padding: 20px;
    font-weight: 900;
    font-family: helvetica;
}