Just to clarify, I am utilizing Bootstrap 3 for my project. Moving on to this specific section of the page (with more content below), I have set the viewport height to 100%. Within this section, there are two rows, each occupying 50% of the viewport height. The first row contains an image that I'd like to center both horizontally and vertically. The second row has an image that I want to center horizontally and fix to the bottom. Here's the HTML structure:
<div class='row vh-100'>
<div class='col-xs-12 col-sm-12 col-md-12 col-lg-12 height-100'>
<!-- Logo -->
<div class='row height-50'>
<div class='col-xs-12 col-sm-12 col-md-12 col-lg-12 relative height-100'>
<img src='images/logo.png'
class='img-responsive block absolute center middle max-height-100'>
</div>
</div>
<!-- Silhouette -->
<div class='row height-50'>
<div class='col-xs-12 col-sm-12 col-md-12 col-lg-12 relative height-100'>
<img src='images/silhouette.png'
class='img-responsive block absolute center bottom max-height-100'>
</div>
</div>
</div>
</div>Here is the corresponding CSS:
.block{
display: block;
}
.absolute{
position: absolute;
}
.relative{
position: relative;
}
.vh-100{
height: 100vh;
}
.vh-50{
height: 50vh;
}
.height-100{
height: 100%;
}
.height-50{
height: 50%;
}
.center{
margin-left: auto;
margin-right: auto;
}
.top{
top: 0%;
}
.middle{
top: 50%;
}
.bottom{
bottom: 0%;
}
.max-height-100{
max-height: 100%;
}I'm encountering an issue where neither image centers horizontally unless their position is changed to relative. Furthermore, the first image aligns vertically within the entire page, rather than in the containing div. Any suggestions on how to resolve this?