当我调整大小时，如何在不干扰页面的情况下居中对象

Question

我正在构建一个即将推出的模板，我在页面中间插入了标题，计数器和订阅表单。

我用百分比来做到这一点。

#line{
    display: table;
    margin: 0 auto;
    margin-top: -20px;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

问题是当我从底部到顶部调整页面大小时，居中对象被重叠：

有没有办法将div放在中间而不使用百分比？我尝试使用Max-height但它没有用。

谢谢。