如何真正使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将左侧元素居中放在窗口的中央,
但是我们需要根据元素的中间将模态框居中窗口。
现在,技巧来了,因为我们在弹出窗口有两个包装器我们可以操作内部的DIV,并且告诉他向左相对移动50%,并且因为它在一个容器中,他将只向左移动一半的大小,这就是我们如何使模态框居中的方法。
添加CSS
.popup .wrapper{
position:relative;
left:-50%;
}
就这样我们把元素水平居中了!
实际示例:
链接
请享用!