Hello,

Please look at this code:

<div class="container-fluid">

<div class="row">

<div class="col">

<img class="img-fluid" src="image/bgImage5.jpg" style="width: 100%; height:auto;z-index:1; position: relative;">

<div class="container " style="z-index:2; position:absolute; ">

<h1 > ghjjkhkjhlhhlhkljh</h1>

</div>

</div>

</div>

</div

How can I make my heading horizontal and vertical-align responsively?

thanks,

Saeed

This should work

img {

width:100%;

height:100vh;

position:relative;

z-index:1;

}

.container {

height:100vh;

position:absolute;

top:50%;

left:50%;

transform:translate(-50%);

z-index:2;

}