javascript - 以绝对 div absolute 为中心的内容/文本；从中心变换

Question

我希望内容在父 div 中垂直居中(全宽)。它目前可以正确过渡/变换，但它在屏幕的中央，内容位于左侧。

内容是动态的(使用示例文本)所以我不能完全控制它的宽度。 (页面看起来是空白的，但是当鼠标悬停在靠近中心的位置时，文本会出现)

<article id="..." class='col-md-12' >

    <div class="lg-indx-img" 
        <a href="#" class="linkage"></a>

        <div class="cat-icn">
          <p>dynamic sample text</p> /* this text is just a sample, my text is brought in through  <?php the_title(); ?> etc */
        </div>

        <div class="cover"></div>
    </div>

</article>

链接:

codepen.io/anon/pen/doRmJJ

Answer 1

将此添加到您的 .cat-icn 样式 block 中:transform: translate(-50%,-50%);。这应该使它处于死点。