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

【问题标题】：Stacking three divs and centering them vertically?堆叠三个 div 并将它们垂直居中？
【发布时间】：2015-06-30 05:37:35
【问题描述】：

这个问题可能已经得到解答，但我在搜索时没有看到任何相关内容，而且我很难理解使 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 中的链接没有垂直居中。由于我查找的大多数解决方案都涉及显示属性，我想我不妨只问完整的问题，而不是尝试为不同的居中问题集成多个解决方案。我计划最终使它具有响应性，在较小的窗口上将右列移动到左下方。有什么想法吗？

【问题讨论】：

那么rightMain容器的高度取决于logo图片的高度？
你需要支持哪些浏览器
是的，理想情况下，我希望徽标为 leftMain 的 100% 高度，并根据查看设备调整该 div 的大小。然后 rightMain 需要与 left 高度相同，并且三个链接在该可变高度内居中。在徽标上没有固定高度的情况下计划所有这些时会变得有点复杂。
编辑：我希望它适用于任何支持 css3 的东西。
我认为仅使用 css 不可能的部分是您的简历、投资组合和联系人在垂直方向上均匀分布的部分。

标签： html css centering

【解决方案1】：

试试这个：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;
}

【讨论】：

感谢您的深入回答！看起来这应该可以工作，我需要进行一些编辑。

【解决方案2】：

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

【讨论】：