嵌套列中间的垂直对齐内容（引导程序）答案

【问题标题】：vertical-align content in middle of nested column (bootstrap)嵌套列中间的垂直对齐内容（引导程序）
【发布时间】：2016-04-02 15:59:07
【问题描述】：

我希望我的内容 (H3 + p) 位于其<div class="col-md-12 inside-row"> 的中间（水平和垂直）。

我尝试显示：flex 和 align-items：center。它确实将我的内容定位在我的<div> 的中间，但是整个专栏都是从我的页面顶部开始并在我的标题上方......

.vertical-align 类用于使我的标题居中（垂直和水平），效果很好。

我正在使用 Bootstrap。

感谢您的帮助！

这是我的 HTML：

<section>
 <div class="container-fluid">
     <div class="row">
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-6">
                    <img src="icons/blue-bezier.gif" alt="icon1">
                    <img src="icons/blue-network.gif" alt="icon2">
                    <img src="icons/blue-layers.gif" alt="icon3">
                </div>
                <div class="col-md-6">
                    <div class="col-md-12 inside-row">
                        <h3>Plan for the long term</h3>
                        <p>Launch universal, fungible, and programmable digital assets. Utilize our smart contract platform for fraud-prouf P2P trading, uncrackable DRM, esports services &amp; active viral marketing.</p>
                    </div>
                    <div class="col-md-12 inside-row">
                        <h3>Proof of Play is a purpose-built system for game currency</h3>
                        <p>A decentralized network that scales down to mobile and provides a cryptographically accurate count of players online. PoP determines a fixed issuance rate based on real gameplay.</p>
                    </div>
                    <div class="col-md-12 inside-row">
                        <h3>Backed by the security of Ethereum</h3>
                        <p>A turing complete platform with numerous pre optimized contract templates.</p>
                    </div>
                </div>
            </div>
        </div>
     </div>
</div>    
</section>

还有我的 CSS：

.vertical-center {
    min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
    min-height: 100vh; /* These two lines are counted as one */
    display: flex;
    align-items: center;
}
.row {
    height: 100vh;
    width:100%;
    background-size: cover;
    margin: 0;
    padding: 0;
}
section .inside-row {
    height: 100vh;
    width:100%;
    background-size: cover;
}
section img {
    width: 40%;
    margin: 0 auto;
    display: flex;
    align-items: center;
}

【问题讨论】：

标签： twitter-bootstrap vertical-alignment

【解决方案1】：

如果您不介意添加额外的标记，一种方法是在您的内容周围添加一个包装器

...
<div class="col-md-12 inside-row">
  <div>
      <h3>Plan for the long term</h3>
      <p>Launch universal, fungible, and programmable digital assets. Utilize our smart contract platform for fraud-prouf P2P trading, uncrackable DRM, esports services &amp; active viral marketing.</p>
  </div>
</div>

然后做

.inside-row > * {
    position: relative;
    top: 50%;
    transform: translate(0, -50%);
}

【讨论】：