垂直居中一个元素

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'垂直位于[中间=11=]

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

Answer 1

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

输出：

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

JSfiddle

垂直居中一个元素

Center vertically an element

html

css

center