Bootstrap 4卡组，垂直对齐中心[重复]答案

【问题标题】：Bootstrap 4 card deck, vertical align center [duplicate]Bootstrap 4卡组，垂直对齐中心[重复]
【发布时间】：2019-01-18 02:05:33
【问题描述】：

我正在尝试垂直对齐（居中）以下卡片组：

    <div class="container-fluid">
      <div class="card-deck d-flex justify-content-center">
        <div class="col-xl-2">
          <div class="card d-flex>
             ....
           </div>
        </div>
      </div>
    </div>

目前看起来像这样：

我尝试使用 my-auto、align-items-center、justify-content-center... 但它不起作用，缺少什么？

感谢您的帮助！

【问题讨论】：

container-fluid 是否有定义的高度？
@Zim 不，它没有
垂直居中是相对于父级的高度。如果父级没有定义的高度，则没有任何东西可以垂直居中。此外，网格col-* 用于.row，而不是card-deck。 codeply.com/go/4zgVRt6OqJ

标签： html css flexbox bootstrap-4

【解决方案1】：

你可以使用position: absolute;垂直对齐任何元素

喜欢，

HTML

<div class="parent">
    <div class="element">I'm always<br/>In<br>Center</div>
</div>

CSS

.parent {
  height: 100%;
}

.element {
  position:absolute;
  top:50%; 
  left: 0;
  transform: translateY(-50%); 
}

.parent {
  height: 100%;
}

.element {
  position:absolute;
  top: 50%; 
  left: 0;
  transform: translateY(-50%); 
}

<div class="parent">
    <div class="element">I'm always<br/>In<br>Center</div>
</div>

或

使用display: table-cell;

HTML

<div class="container">
    <div class="content">I'm always<br/>In<br>Center</div>
</div>

CSS

html, body {
    width: 100%;
    height: 100%;
    display: table;
}

.container {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

.content {
    background-color: #dddddd;
    display: inline-block;
    text-align: center;
    padding: 5px;
    width:200px;
}

实时片段

html, body {
    width: 100%;
    height: 100%;
    display: table;
}

.container {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

.content {
    background-color: #dddddd;
    display: inline-block;
    text-align: center;
    padding: 5px;
    width:200px;
}

<div class="container">
    <div class="content">I'm always<br/>In<br>Center</div>
</div>

【讨论】：

父级在卡片组，元素在 col-* 上，它可以工作！谢谢