Bootstrap 4卡座，垂直对齐中心

Question

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

    <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 ...但是它不起作用，缺少了什么？

感谢您的帮助！

Answer 1

您可以使用position: absolute;

垂直对齐任何元素

like，

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>

OR

使用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>