如何在引导程序 4 中使组件垂直居中且等高列答案

【问题标题】：How to make components vertically centered with equal height column in bootstrap 4如何在引导程序 4 中使组件垂直居中且等高列
【发布时间】：2019-12-16 07:02:59
【问题描述】：

我已经应用了这个问题的解决方案：Bootstrap 4 vertical center - equal height cards

但是，我的问题没有得到解决。尽管我已经应用了这些，但我无法实现相同的高度和垂直居中：

<div class="cycle-des h-100 justify-content-center">Product Cycle</div>

这是我的问题的屏幕截图：

这是我的Demo

【问题讨论】：

标签： css bootstrap-4

【解决方案1】：

给你，

  <div class="container">
      <div class="row">
        <div class="col-md-4 mb-3 pr-md-0">
          <div class="cycle-des h-100 align-items-center justify-content-center">Product Cycle</div>
        </div>
        <div class="col-md-4 mb-3 pr-md-0">
          <div class="row no-gutters h-100">
            <div class="col-4 col-lg-3">
              <div class="cycle-num h-100 align-items-center justify-content-center">01</div>
            </div>
            <div class="col-8 col-lg-9">
              <div class="cycle-des h-100 align-items-center justify-content-center">handloom: 4-7days</div>
            </div>
          </div>
        </div>
        <div class="col-md-4 mb-3 pr-md-0">
          <div class="row no-gutters h-100">
            <div class="col-4 col-lg-3">
              <div class="cycle-num h-100 align-items-center justify-content-center">02</div>
            </div>
            <div class="col-8 col-lg-9">
              <div class="cycle-des h-100 align-items-center justify-content-center">S/S MQ: 50M</div>
            </div>
          </div>
        </div>
        <div class="col-md-4 mb-3 pr-md-0">
          <div class="row no-gutters h-100">
            <div class="col-4 col-lg-3">
              <div class="cycle-num h-100 align-items-center justify-content-center">03</div>
            </div>
            <div class="col-8 col-lg-9">
              <div class="cycle-des h-100 align-items-center justify-content-center">S/S: 25-30days</div>
            </div>
          </div>
        </div>
        <div class="col-md-4 mb-3 pr-md-0">
          <div class="row no-gutters h-100">
            <div class="col-4 col-lg-3">
              <div class="cycle-num h-100 align-items-center justify-content-center">04</div>
            </div>
            <div class="col-8 col-lg-9">
              <div class="cycle-des h-100 align-items-center justify-content-center">Order MQ: 2000M</div>
            </div>
          </div>
        </div>
        <div class="col-md-4 mb-3 pr-md-0">
          <div class="row no-gutters h-100">
            <div class="col-4 col-lg-3">
              <div class="cycle-num h-100 align-items-center justify-content-center">05</div>
            </div>
            <div class="col-8 col-lg-9">
              <div class="cycle-des h-100 align-items-center justify-content-center">Order delivery date: 35-50 days</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    .cycle-num, .cycle-des {
      color: #fff;
      text-align: center;
      padding: 20px 10px;
      display: flex;
    }
    .cycle-num {
      background-color: #666;
    }
    .cycle-des {
      background-color: #333;
    }

但我相信你可以减少 div 并且可以做得更好。只是一个建议，您不必在任何地方都使用网格类。只需将其用于布局即可。

https://jsfiddle.net/mdsebans/yhcb30L5/5/

【讨论】：