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

-4

我想在视口中间放置一个元素（div，模式/对话框），而不管页面大小。如何将视图中间的元素居中？

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

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

我怎样才能用CSS做到这一点？

来源

2017-10-05 Stefan

用'位置：绝对'或'位置：固定' – lll

尝试你的运气绝对位置不起作用，因为我不想将它相对于父位置。固定不起作用，因为我想在视口的中间，而不是整个页面。 – Stefan

这就是'position：absolute'的意思。将其与其父元素分离，除非您明确将父项设置为'relative'。 –

试试这个片段。

.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本身，并且它没有嵌入任何信息。

来源

2017-10-05 11:49:11

谢谢。然后我知道我做不到。 – Stefan

如果您将iframe自身居中放置在其父视口中，那么您的模态也将以某种方式位于主页的中心。但是我不知道在你的具体情况下这将是怎么可能的。 –

应用下面的CSS

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

固定会确保它是相对于视位置。左上角50％会将元素的顶部和左侧移动到中心。您希望它处于绝对中心位置，可以通过转换完成：translate（-50％， - 50％）;

来源

2017-10-05 11:49:37 Pavan

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

回答

相关问题