Question

我必须把＃34; Play＆＃34;图标和文字＆＃34; Play＆＃34;在包含元素的中心及其高度和宽度取决于该图像 - 它们根据用户的屏幕而变化。我试图像这样使用它

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;
}

但实际上左边的那个：前面的元素在中间并且看起来有点移位......你能建议我更好的解决方案吗？

Answer 1

将其添加到代码

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

或使用相同方式翻译

 div{
   position: relative;
   width: 200px;
   height: 200px;
   background: red;
   margin: 20px auto
 }
div:after{
   content: '';
   position: absolute;
   width: 50px;
   height: 20px;
   z-index: 2;
   top: 50%;
   left: 50%;
   background: green;
   transform: translate( -50%, -50%)
}

<div><div/>

定位元素位于动态大小的元素中间

1 个答案: