很多人试图通过只有CSS，在页面中心的绝对/固定位置，将模态框中的元素定位在中心，结果失败，然后他们尝试用JS（第二个错误）来做。

在本技巧中，我将向你展示如何在不使用JavaScript的情况下居中模态框。

这个技巧非常简单，而不是只使用一个包装器元素，使用两个元素。

HTML

<div class="popup">
 <div class="wrapper">
 some content
 </div>
</div>

CSS

.popup{
 position:fixed;
 left:50%; 
}

这个CSS将左侧元素居中放在窗口的中央，
但是我们需要根据元素的中间将模态框居中窗口。

现在，技巧来了，因为我们在弹出窗口有两个包装器我们可以操作内部的DIV，并且告诉他向左相对移动50%，并且因为它在一个容器中，他将只向左移动一半的大小，这就是我们如何使模态框居中的方法。

添加CSS

.popup .wrapper{
 position:relative; 
 left:-50%;
} 

就这样我们把元素水平居中了！

实际示例：
链接

请享用！