Center absolute positioned pseudo element

Question

Here is the fiddle. What I am trying to do is to absolute position the FontAwesome play button on top of the image and in the center. Wondering if anyone has tried this before or has any insight, have tried to do it every way I can think.

Note, I do not have access to the markup on the page I am working on, has to be pure CSS.

.test {
  height: 500px;
  width: 100%;
}

.test:before {
  content: "\f144";
  font-family: FontAwesome;
  font-size: 80px;
  left: 50%;
  position: absolute;
  top: 50%;
}

img {
  width: 100%;
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="test">
  <img src="http://placehold.it/350x150">
  <h2>Lorem ipsum dolor sit amet</h2>
  <div class="description">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis dicta quae a illo nulla, temporibus in nostrum id quia totam sint veritatis aspernatur vitae, similique labore non voluptate, dolores magnam.
  </div>
  <br>
  <a class="btn btn-default">Learn More >></a>
</div>

Answer 1

With the given markup, and if you know the image ratio up front, you can do like this, where you use it to calculate against the viewport width vw, combined with transform: translate.

In this case the image ratio factor is 150 / 350 ~ 0.428

Fiddle demo

.test {
  height: 500px;
  width: 100%;
}

.test:before {
    content: "\f144";
    font-family: FontAwesome;
    font-size: 80px;
    left: 50%;
    position:absolute;
    top: calc(50vw * 0.428);              /* width * image ratio factor */
    transform: translate(-50%,-50%);
}

img{
  width: 100%;
}

 <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">   
 <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
      
<div class="test">
  <img src="http://placehold.it/350x150">
  <h2>Lorem ipsum dolor sit amet</h2>
  <div class="description">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis dicta quae a illo nulla, temporibus in nostrum id quia totam sint veritatis aspernatur vitae, similique labore non voluptate, dolores magnam.
  </div>
  <br>
  <a class="btn btn-default">Learn More >></a>
</div>

Answer 2

You will need to use Javascript for that, here is an example via jQuery:

• Insert a wrapper and set it to the same height as the banner image.
• Add the fa play icon into that wrapper.
• Put them into jQuery resize() function to make it responsive.
• Use CSS flexbox or any other approach to center the icon in the wrapper.

jsFiddle

$(document).ready(function() {
  $(window).trigger('resize');
});

$(window).on('resize', function() {
  if (!$('.wrap').length) {
    $('<div class="wrap"><i class="fa fa-play-circle" aria-hidden="true"></i></div>').prependTo('.test');
  }
  $('.wrap').css('height', $('.test img').height());
});

.test {
  position: relative;
}

.wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  font-size: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}

img {
  width: 100%;
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="test">
  <img src="http://placehold.it/350x150">
  <h2>Lorem ipsum dolor sit amet</h2>
  <div class="description">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis dicta quae a illo nulla, temporibus in nostrum id quia totam sint veritatis aspernatur vitae, similique labore non voluptate, dolores magnam.
  </div>
  <br>
  <a class="btn btn-default">Learn More >></a>
</div>

Answer 3

Try this!

<div class="test">
<div class="image">
<img src="http://placehold.it/350x150">
<div class="play"></div>
</div>

<h2>Lorem ipsum dolor sit amet</h2>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis dicta quae a illo nulla, temporibus in nostrum id quia totam sint veritatis aspernatur vitae, similique labore non voluptate, dolores magnam.
</div>
<br>
<a class="btn btn-default">Learn More >></a>
</div>

CSS:

.test {
  height: 500px;
  width: 100%;
}
.image{
  position:relative;
}
.play::after {
    content: "\f144";
    font-family: FontAwesome;
    font-size: 80px;
    left: 50%;
    position:absolute;
    top:50%;
    transform:translate(-50%,-50%);
}

img{
  width: 100%;
}