如何真正使HTML元素(通过css位置absolute/fixed )居中

・1 分钟阅读

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

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

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

HTML


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

CSS


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

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

Picture

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

添加CSS


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

Picture

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

实际示例:
链接

请享用!

学以致用 profile image