以绝对div绝对为中心的内容/文本;从中心转变

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样式块中：transform: translate(-50%,-50%);。这应该使它成为死亡中心。