Need help centering an image vertically and horizontally in my code. I've tried various methods found online, including using img-fluid, img-thumbnail, and my-auto classes. Setting margin: 10% works fine, but auto does not work as expected.
<div class="intro">
<div class="row">
<div class="col-10 col-md-12 col-lg-6">
<img class=" img-fluid " src="./img/l-intro-img.jpg" alt="l-intro-img"/>
</div>
<div class="col-12 col-md-12 col-lg-6">
<h1>Random text</h1>
</div>
</div>
</div>
.intro {
width: 100%;
height: 100vh;
overflow: hidden;
background-image: url(../img/bg-intro.svg);
background-position: center;
background-size: auto;
}
.img-fluid {
display: block;
margin: auto 0px;
}