堆叠三个 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;
}

这工作得相当好，但 rightMain 中的链接没有垂直居中。由于我查找的大多数解决方案都涉及显示属性，我想我不妨只问完整的问题，而不是针对不同的居中问题尝试集成多个解决方案。我计划最终让它响应，让右列在较小的 windows 上移动到左下方。有什么想法吗？

Answer 1

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

Fiddle: 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;
}

堆叠三个 div 并将它们垂直居中？

Stacking three divs and centering them vertically?

html

css

centering