如何在使用缩放动画时居中固定div

Question

我正在尝试水平和垂直居中固定的弹出窗口。为此，我使用了：

top: 50%;
left: 50%;
transform: translate(-50%, -50%);

...但是我试图添加一个缩放动画，该动画在单击链接时从中心放大，而弹出窗口则从右下角放大。我希望它居中缩放。 我正在像这样向transform属性添加比例：

transform: scale(1) translate(-50%, -50%);

我尝试使用center使用transform-origin，但这没用。

这里是代码的链接： https://codepen.io/anon/pen/zQymON#anon-login