2

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:

enter image description here

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

Thanks for the help!

htshame
  • 5,577
  • 4
  • 28
  • 49
Marces Dan
  • 53
  • 2
  • 6
  • Does the `container-fluid` have a defined height? – Zim Jan 17 '19 at 15:16
  • @Zim no, it doesn't – Marces Dan Jan 17 '19 at 17:09
  • **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 – Zim Jan 17 '19 at 18:12

1 Answers1

1

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>
Nisharg Shah
  • 12,598
  • 6
  • 51
  • 61