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

Posted 2023-03-05

【中文标题】将元素定位在动态大小的元素中间

【英文标题】：Positioning element in the middle of dynamically sized element

【发布时间】：2015-07-04 22:04:26

【问题描述】：

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

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 元素的左上角在中间，看起来很移位......你能建议我更好的解决方案吗？

【问题讨论】：

你可以使用 display: table > display: table-cell 和 vertical-align: middle styles

【参考方案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/>

【讨论】：

太棒了 :) 我喜欢简单的解决方案，但是如果 :after 容器的大小是动态的呢？

那么你将需要 JS，因为 var 尚未在 css 中完成 caniuse.com/#feat=css-variables 和 developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables 你可以尝试 SASS 或 LESS

是的，元素居中动态，但如果你改变 100px 的宽度和高度，你可以添加边距 -50px 和高度：-50px (-(width/2) 和 -(height/2))

你不能也用calc()吗？

@Tambo 认为transform: translate(-50%, -50%); 行是天才。