Css 动态尺寸元件中部的定位元件

我必须将“播放”图标和文本“播放”放在包含该图像的元素的中心，其高度和宽度取决于该图像-它们根据用户的屏幕而变化。 我试着这样使用它

a.thumbnail:hover:after
{
    content: "Play";
    width: 50px;
    height: 20px;
    display: inline-block;
    position: absolute;
    top:50%;
    left: 50%;
    background-color: #fff;
    border: 1px solid red;
}

但实际上左上角：前元素在中间，看起来是移位的…你能给我推荐更好的解决方案吗？

将此添加到代码中

  margin: -10px -25px; /** height/2 width/2 **/

或者用同样的方法翻译

div{
位置：相对位置；
宽度：200px；
高度：200px；
背景：红色；
利润率：20px自动
}
部门：之后{
内容：''；
位置：绝对位置；
宽度：50px；
高度：20px；
z指数：2；
最高：50%；
左：50%；
背景：绿色；
转换：转换（-50%，-50%）
}

---

您可以使用display:table>display:table cell和vertical align:middle styles创建：）我喜欢简单的解决方案，但是如果：after容器的大小是动态的，那么您将需要JS，因为

var

尚未在css中完成，您可以尝试SASS或LESSyes，即以元素为中心的动态，但是，如果您在100px上更改宽度和高度，您可以添加边距-50px和高度：-50px（-（宽度/2）和-（高度/2））您不能同时使用

calc（）

吗？@Tambo that

transform:translate（-50%，-50%）行是亲切的。