css - 居中绝对定位伪元素

Question

这是 fiddle .我想要做的是将 FontAwesome 播放按钮绝对定位在图像顶部和中心。想知道是否有人以前尝试过这个或有任何见解，已经尝试过我能想到的每一种方式。

请注意，我无法访问我正在处理的页面上的标记，必须是纯 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

使用给定的标记，如果你预先知道图像比例，你可以这样做，你可以使用它来计算视口(viewport)宽度 vw，并结合 转换:翻译。

在这种情况下图像比例因子为 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>