Vertical aligning content in :before pseudoelement - html

Question

I'm trying to create an overlay on some links that will show a magnifying glass as an overlay when you hover over it.
For simplicity, I've created a fiddle here: https://jsfiddle.net/rw4hngvj/1/
I'm able to get the magnifying glass icon centered horizontally, but I can't center it vertically, it's always at the top of the element. I've tried setting vertical-align:middle and top:50%, but neither of those work.
One restriction I have is that I can't change the HTML at all, and I can only change the css for the :before pseudoelement.
Is there any way I can center the content of :before?

Answer 1

Add position:relative; to .caption:before.
You need to use the position property along with top.

Answer 2

Adding these properties to your :before element, should center it. (based on your current code) Explanation below.
transform: translateY(-50%);
position: absolute;
left: 0;
right: 0;
Position: absolute is KEY.
Using a combination of position:absolute, left: 0, right: 0, and margin: 0 auto (this is like saying: margin-left: auto, margin-right: auto, margin-top/bottom: 0) centers your element horizontally.
And using position: absolute, top: 50%, transform: translateY(-50%) centers your element vertically.
There are other ways to do this, but this is the quickest way that requires no modification to your current CSS.
Your final css for caption:before should look like this:
.caption:before {
content: "\f002";
font-family: 'FontAwesome';
color: #ffffff;
font-size: 2em;
top: 50%;
margin: 0 auto;
display: block;
transform: translateY(-50%);
position: absolute;
left: 0;
right: 0;
}

Answer 3

add position .caption:before
.caption:before {
content: "\f002";
font-family: 'FontAwesome';
color: #ffffff;
font-size: 2em;
/* vertical-align: middle; */
top: 50%;
left:50%;
margin: -16px 0 0 -16px;
display: block;
position: absolute;
}
https://jsfiddle.net/rw4hngvj/3/

Answer 4

a.tile
{
position: relative;
display: block;
width: 150px;
height: 150px;
background-color: green;
}
.caption
{
width: 100%;
height: 100%;
opacity: 0;
display: block;
background: rgba(0,0,0,.6);
text-align: center;
cursor: pointer;
}
.caption:hover {
opacity: 1;
}
.caption:before {
content: "\f002";
font-family: 'FontAwesome';
color: #ffffff;
font-size: 2em;
top: 0; left: 0; bottom: 0; right: 0;
display: block;
width: 1em;
height: 1em;
overflow: auto;
margin: auto;
position: absolute;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<a class="tile">
<div class="caption">
</div>
</a>
<a class="tile">
<div class="caption">
</div>
</a>

Answer 5

If you can use flexbox, just try this one
.caption
{
width: 100%;
height: 100%;
display: flex;
justify-content:center;
flex-direction:both;
align-items:center;
opacity: 0;
background: rgba(0,0,0,.6);
text-align: center;
cursor: pointer;
}