如何在视口中间居中元素？答案

【问题标题】：How can I center an element in the middle of the viewport?如何在视口中间居中元素？
【发布时间】：2017-11-24 06:45:44
【问题描述】：

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

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

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

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

【问题讨论】：

用position: absolute或position: fixed试试你的运气
绝对位置不起作用，因为我不想相对于父级定位它。固定也不起作用，因为我希望它位于视口中间，而不是整个页面。
这就是position: absolute 的用途。将其与其父元素解耦，除非您将父元素显式设置为relative。
在 SO 上，您应该尝试自己编写代码。在 doing more research 之后，如果您遇到问题，您可以发布您尝试过的内容，并清楚地解释什么不起作用并提供一个 Minimal, Complete, and Verifiable example.
如果您使用的是 iframe，则不可能。

标签： html css

【解决方案1】：

应用以下 CSS

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

位置固定将确保它相对于视口。 left 和 top 50% 会将元素的顶部和左侧移动到中心。您希望它位于绝对中心，可以通过 transform: translate(-50%,-50%);

【讨论】：

【解决方案2】：

试试这个 sn-p。

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

【讨论】：

谢谢。那我就知道我做不到了。
如果您将 iframe 本身置于其父视口的中心，您的模态也会以某种方式位于主页的中心。但我不知道在你的具体情况下这怎么可能。