Question

无论页面大小如何，我都希望将一个元素（div，模态/对话框）置于视口中间。

这个想法是对话框总是出现在当前视图端口的中间，因此无论页面大小如何，用户都可以看到它。在我的情况下，我有一个非常长的页面，有很多滚动，如果用户位于页面的底部，对话框出现在页面中间，用户无法看到它，因为它不在他的视口中

我的HTML网站在iframe中运行，这使得任务更加困难。

我怎样才能使用CSS？

Answer 1

试试这个代码段。

＆＃13;

.modal{
    width: 200px;
    height: 150px;
    border: 1px solid black;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

＆＃13;

<div class="modal">
    
</div>

＆＃13;

好吧，在您编辑问题并提及之后，该页面位于iframe中，我至少可以说，无法将iframe内的元素放入浏览器的当前视口。该元素的最全局上下文是iframe本身，它没有嵌入任何内容的信息。

Answer 2

应用以下CSS

.center{
 position: fixed;
 left: 50%;
 top: 50%;
 transform: translate(-50%,-50%);
}

固定位置可确保它相对于视口。 left和top 50％会将元素的顶部和左侧移动到中心。你希望它在绝对中心，它可以通过变换来完成：translate（-50％， - 50％）;

如何将视口中间的元素居中？

2 个答案: