我如何将一个元素集中在视口的中间

Question

我想在视口中间将一个元素（DIV，模态/对话框）集中，无论页面大小如何。

这个想法是对话框总是出现在当前视图端口的中间，因此无论页面大小如何，用户都可以看到它。就我而言，我有一个很长的页面，上面有很多滚动，如果用户在页面的底部，并且对话框出现在页面中间，则用户看不到它，因为它不在他的视图中。

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

我只能使用CSS进行操作？

Answer 1

遵循CSS

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

固定的位置将确保其相对于视口。左和最高的50％将移动元素的顶部并左移至中心。您希望它位于绝对中心，可以通过转换来完成：转换（-50％，-50％）;

Answer 2

尝试此片段。

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

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

好吧，在您编辑了问题并提到该页面是在iframe中，我至少可以说，不可能将iframe的元素放在浏览器的当前视口上。该元素最全局的上下文是iframe本身，它在其嵌入的任何内容中都没有有关。