Bootstrap 4 card deck, vertical align center

Question

Im Trying to vertically align (center) the the following card deck:

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

Currently looks like this:

I tried with my-auto, align-items-center, justify-content-center... but it doesn't work, what is missing?

Thanks for the help!

**Vertical centering is relative to the height parent**. If the parent has no defined height there is nothing to vertically center. Also, the grid `col-*` are meant to be used in .row, not `card-deck`. https://www.codeply.com/go/4zgVRt6OqJ — Carol Skelly, Jan 17 '19 at 18:12

Nisharg Shah · Accepted Answer · 2019-01-17T15:44:47.393

you can vertical align any element using 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

using 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;
}

LIVE SNIPPET

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>

Parent on card-deck, element on col-* and it works! Thank you — Marces, Jan 18 '19 at 10:59

Bootstrap 4 card deck, vertical align center

1 Answers1