将元素定位在动态调整大小的元素中间

Question

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

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

但实际上 :before 元素的左上角在中间并且看起来错位了......你能建议我更好的解决方案吗？

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/>

将元素定位在动态调整大小的元素中间

Positioning element in the middle of dynamically sized element

css

position

centering