vertical-align 嵌套列中间的内容 (bootstrap)

Question

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

我尝试显示：flex 和 align-items：center。它确实将我的内容定位在 <div> 的中间，但随后整个专栏从我的页面顶部开始，并超过了我的 header...

class .vertical-align 使我的 header 居中（垂直和水平）并且效果很好。

我正在与 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;
}

Answer 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%);
}

vertical-align 嵌套列中间的内容 (bootstrap)

vertical-align content in middle of nested column (bootstrap)

vertical-alignment

twitter-bootstrap