这是小提琴。我想要做的是将 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>使用给定的标记，并且如果您预先知道图像比例，您可以这样做，您可以使用它来计算视口宽度vw，结合transform: translate.
在这种情况下，图像比例因子为 150 / 350 ~ 0.428
.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>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句