Vertical alignment in a position-fixed div - css

Question

I have a div, inside a bootstrap column, that has class position-fixed so that the contents inside are fixed relative to the viewport. I am able to horizontally align these contents but I am having trouble vertically aligning it.
I know there are many methods out there in bootstrap 4, but it all seems to break due to the position-fixed class. Either the contents disappear somewhere outside the page, or nothing happens.
<div class="container-fluid">
<div class="row">
<div class="col-md">
<div class="container">
<div class="row justify-content-md-center">
<div class="position-fixed h-100 col-md-auto">
<div class="text-center vertical-center">
<h2>Title</h2>
<p>Subtext</p>
<a data-toggle="modal" data-target="#Modal" href="#">Click me</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div

Answer 1

If you want it to be fixed position, there's no reason to contain it inside the other elements (container, row, col) since as you said, it's positioning is relative to the viewport. Therefore, use custom CSS to center it...
.vertical-center {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
https://www.codeply.com/go/rtOA3jgjPG
Or, to use the Bootstrap classes, make the fixed element a flexbox container using d-flex, and then align-items-center to center.
<div class="position-fixed h-100 col-md-auto d-flex align-items-center">
<div>centered content</div>
<div>
https://www.codeply.com/go/TmySmKXXjC

Answer 2

Apply Bootstrap's flexbox utilities to the parent of the div you're trying to center (this is a good cheatsheet of what different flex properties do if you need it):
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-md">
<div class="container">
<div class="row justify-content-md-center">
<div class="position-fixed h-100 col-md-auto d-flex align-items-center">
<div class="text-center vertical-center">
<h2>Title</h2>
<p>Subtext</p>
<a data-toggle="modal" data-target="#Modal" href="#">Click me</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Specifically, adding d-flex and align-items-center should work.

Answer 3

#OuterDiv {
position: fixed;
width: 100%;
height: 50px;
}
#InnerDiv {
display: inline-block;
top: 50%;
transform: translateY(-50%);
position: relative;
}