垂直居中元素

Question

我只是被困在如何垂直居中的元素。

<div class="wpb_wrapper">
<article class="callout"><a class="callurl" href="#">NOS SUCCESS STORIES</a>
<h3>Développement IT</h3><p></p>
<p>La transformation digitale, c’est avant tout un nouveau rapport d’opportunités d’innovations immense, dynamisé par :</p>
<p>- L’adhésion accélérée du grand public à de nouveaux usages.</p>
<p>- La collecte et le traitement de données toujours plus nombreuses.</p>
<p>- Le partage de la connaissance et l'Open Innovation IT.</p>
<p></p></article>
</div>

代码位于：http://jsfiddle.net/lzyphil/2bq7zqvf/

事实上，这部分代码是由wordpress插件Webnus Callout生成的，我正在尝试修改css，希望'NOS SUCESS STORIES'垂直位于<article>中间

有人有想法吗？解决方案将不胜感激！感谢

Answer 1

您可以将callout按钮相对于相对父容器放置在绝对位置。当达到移动大小浏览器断点时，它会重叠。但您可以使用具有所需位置的媒体查询对其进行修改。

<强>输出：

.callout a.callurl {
  position: absolute;
  right: 5%;
  top: 40%;
}

JSfiddle