Bootstrap 4垂直对齐列[重复]

Posted 2023-03-05

【中文标题】Bootstrap 4垂直对齐列[重复]

【英文标题】：Bootstrap4 vertical align column [duplicate]

【发布时间】：2017-12-10 07:53:40

【问题描述】：

是否有快速的 flexbox 类来垂直对齐列内的内容？

例如

  <div class="row">
      <div class="col">
        unknown height
      </div>
      <div class="col h100 d-flex justify-content-center">
        set same height as previous + flex center
      </div>
  </div>

上面显然不起作用，但你明白了......

使用https://scotch.io/quick-tips/different-tricks-on-how-to-make-bootstrap-columns-all-the-same-height#toc-option-4-use-flexbox 可以实现相同高度的行

-> 感觉不是最流畅的解决方案，不是有原生的bootstrap类吗？

而且它仍然没有对齐中间

【问题讨论】：

正确，但对问题没有明确的答案...

【参考方案1】：

好的，这就够了：

<div class="row align-items-center"></div>