bootstrap 4 vertical centre and positioning of div [duplicate] - html

Question

This question already has answers here:
Vertical Align Center in Bootstrap 4 [duplicate]
(20 answers)
Closed 3 years ago.
I'm trying to put some cards in a container with a parallax background effect. But while doing so, I cannot make the cards vertically centered. the row on which they are at is coming at the starting of the div. Also I want to do the container div to be relatively positioned so that the cards that are absolutely positioned will be relative to the container they're within instead of the entire page. In mobile view the cards are coming out of the div and overlapping other elements in the page. Have a look at my code below:
HTML
<div class="container-fluid parallax">
<div class="row justify-content-center">
<div class="col-lg-3 col-md-4 col-sm-8">
<div class="hovereffect">
<img class="img-responsive" src="assets/images/antoine-barres.jpg" alt="" width="350" height="200">
<div class="overlay">
<h2>Hover effect 1</h2>
<a class="info" href="#">link here</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-8">
<div class="hovereffect">
<img class="img-responsive" src="assets/images/antoine-barres.jpg" alt="" width="350" height="200">
<div class="overlay">
<h2>Hover effect 1</h2>
<a class="info" href="#">link here</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-8">
<div class="hovereffect">
<img class="img-responsive" src="assets/images/antoine-barres.jpg" alt="" width="350" height="200">
<div class="overlay">
<h2>Hover effect 1</h2>
<a class="info" href="#">link here</a>
</div>
</div>
</div>
</div>
</div>
CSS
.parallax {
background-image: url("/assets/images/home_services.jpg");
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.hovereffect {
width:100%;
height:100%;
float:left;
overflow:hidden;
position:relative;
text-align:center;
cursor:default;
}
.hovereffect .overlay {
width:100%;
height:100%;
position:absolute;
overflow:hidden;
top:0;
left:0;
opacity:0;
background-color:rgba(0,0,0,0.5);
-webkit-transition:all .4s ease-in-out;
transition:all .4s ease-in-out
}
.hovereffect img {
display:block;
position:relative;
-webkit-transition:all .4s linear;
transition:all .4s linear;
}
.hovereffect h2 {
text-transform:uppercase;
color:#fff;
text-align:center;
position:relative;
font-size:17px;
background:rgba(0,0,0,0.6);
-webkit-transform:translatey(-100px);
-ms-transform:translatey(-100px);
transform:translatey(-100px);
-webkit-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
padding:10px;
}
.hovereffect a.info {
text-decoration:none;
display:inline-block;
text-transform:uppercase;
color:#fff;
border:1px solid #fff;
background-color:transparent;
opacity:0;
filter:alpha(opacity=0);
-webkit-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
margin:50px 0 0;
padding:7px 14px;
}
.hovereffect a.info:hover {
box-shadow:0 0 5px #fff;
}
.hovereffect:hover img {
-ms-transform:scale(1.2);
-webkit-transform:scale(1.2);
transform:scale(1.2);
}
.hovereffect:hover .overlay {
opacity:1;
filter:alpha(opacity=100);
}
.hovereffect:hover h2,.hovereffect:hover a.info {
opacity:1;
filter:alpha(opacity=100);
-ms-transform:translatey(0);
-webkit-transform:translatey(0);
transform:translatey(0);
}
.hovereffect:hover a.info {
-webkit-transition-delay:.2s;
transition-delay:.2s;
}

Answer 1

My suggestion is to use flex, as the following example shows. Used most of your code, just added some background colors to make the elements visible without images.
.parallax {
background-image: url("/assets/images/home_services.jpg");
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: #ff0;
position: relative;
}
.hovereffect {
width: 100%;
height: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
}
.hovereffect .overlay {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
opacity: 0;
background-color: rgba(0, 0, 0, 0.5);
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out
}
.hovereffect img {
display: block;
position: relative;
-webkit-transition: all .4s linear;
transition: all .4s linear;
background-color: #f00;
}
.hovereffect h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
background: rgba(0, 0, 0, 0.6);
-webkit-transform: translatey(-100px);
-ms-transform: translatey(-100px);
transform: translatey(-100px);
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
padding: 10px;
}
.hovereffect a.info {
text-decoration: none;
display: inline-block;
text-transform: uppercase;
color: #fff;
border: 1px solid #fff;
background-color: transparent;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
margin: 50px 0 0;
padding: 7px 14px;
}
.hovereffect a.info:hover {
box-shadow: 0 0 5px #fff;
}
.hovereffect:hover img {
-ms-transform: scale(1.2);
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
.hovereffect:hover .overlay {
opacity: 1;
filter: alpha(opacity=100);
}
.hovereffect:hover h2,
.hovereffect:hover a.info {
opacity: 1;
filter: alpha(opacity=100);
-ms-transform: translatey(0);
-webkit-transform: translatey(0);
transform: translatey(0);
}
.hovereffect:hover a.info {
-webkit-transition-delay: .2s;
transition-delay: .2s;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid parallax d-flex">
<div class="row justify-content-center align-items-center">
<div class="col-3">
<div class="hovereffect">
<img class="img-responsive" src="assets/images/antoine-barres.jpg" alt="" width="350" height="200">
<div class="overlay">
<h2>Hover effect 1</h2>
<a class="info" href="#">link here</a>
</div>
</div>
</div>
<div class="col-3">
<div class="hovereffect">
<img class="img-responsive" src="assets/images/antoine-barres.jpg" alt="" width="350" height="200">
<div class="overlay">
<h2>Hover effect 1</h2>
<a class="info" href="#">link here</a>
</div>
</div>
</div>
<div class="col-3">
<div class="hovereffect">
<img class="img-responsive" src="assets/images/antoine-barres.jpg" alt="" width="350" height="200">
<div class="overlay">
<h2>Hover effect 1</h2>
<a class="info" href="#">link here</a>
</div>
</div>
</div>
</div>
</div>

Answer 2

One solution would be to set a a height for a common container of these images and use flexbox to align items vertically. However, this is not super dry as a solution.
So, what you could do is take your .container-fluid's container, make it a flex with .d-flex and align them with align-items-center.
Here is some reference on bootstrap 4's flex utility classes.