How to center loading image on overlay - css

Question

I've tried about everything I can find on SO, so I'm hoping someone can point out what I'm doing wrong. I know there are extensive posts, but believe me I've tried, whats seems to be all of them...
The content area in the image below will expand as needs depending on the amount of bound data, I've only managed to horizontal center the loader, but not sure how to get it to sit in the center of the overlay. It's also worth mentioning that I'm using bootstrap.
Question:
How do I vertically center a loading animation inside another div?
Assumption:
I've been tinkering with the position and a few other options, but I'm not sure. I'm thinking the "tree" working down from the top element needs to be in a certain state to allow me to vertical center the div... but not sure what or how it can be achieved?
Working Fiddle or snippet below...
.overlay {
width: 100%;
height: 100%;
background: grey;
border-radius: 5px;
}
.overlay .overlay-modal {
line-height: 200px;
position: relative;
border-radius: 5px;
z-index: 11;
margin: 0 auto;
}
.overlay .overlay-modal p {
background-color: #f1c40f;
width: 300px;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 120px;
color: white;
border-radius: 5px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<br/>
<div class="container-fluid">
<div class="col-md-2 sidebar well">
Some Menu
</div>
<div class="col-md-6 main">
<div class="container-fluid overlay">
<div class="overlay-modal">
<p><i class="fa fa-gear fa-spin"></i>
</p>
</div>
<div class="row">
<div class="col-md-12">
<h3>Employee</h3>
<p>
Content
</p>
<p>
Content
</p>
<p>
Content
</p>
<p>
Content
</p>
<p>
Content
</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 main">
Other content
</div>
<div>

Answer 1

You placed your position relative on the wrong element.
.overlay {
position: relative;
}
instead of
.overlay-modal {
position: relative;
}

Answer 2

Using this CSS worked for me.
.overlay .overlay-modal {
line-height: 200px;
position: absolute !important;
top: 50%;
left: 50%;
border-radius: 5px;
z-index: 11;
margin: 0 auto;
-webkit-transform: translate(-50%);
-moz-transform: translate(-50%);
-ms-transform: translate(-50%);
-o-transform: translate(-50%);
transform: translate(-50%);
}
Is there any reason you can't use position: absolute;