Html 如何使弹出窗口始终居中？_Html_Css

Html 如何使弹出窗口始终居中？

html css

Html 如何使弹出窗口始终居中？,html,css,Html,Css,这并非无关紧要：Roseannebarr.tumblr.com是我正在制作的主题所在如果这些弹出窗口是position:absolute；，我如何使它们居中正如你所知，我正在构建一个TUMBLR主题。不是一个网站 HTML：如果查看源代码，则无法看到这些标记，因为它们是内容 CSS HTML {block:Posts} {块：照片} {LinkOpenTag}{LinkCloseTag} {block:Caption}{Caption}{/block:Caption} {/block:Ph

这并非无关紧要：Roseannebarr.tumblr.com是我正在制作的主题所在

如果这些弹出窗口是position:absolute；，我如何使它们居中

正如你所知，我正在构建一个TUMBLR主题。不是一个网站

HTML：如果查看源代码，则无法看到这些标记，因为它们是内容

CSS

HTML


{block:Posts}
{块：照片}
{LinkOpenTag}{LinkCloseTag}
{block:Caption}{Caption}{/block:Caption}
{/block:Photo}
{block:Text}
{块：标题}
{Title}{/block:Title}
{Body}{block:More}{/block:More}
{/block:Text}
{/block:Posts}
{Title}
{说明}

您需要为窗口的调整大小事件分配一个事件处理程序。调整窗口大小时，将通知事件处理程序重新计算新中心并相应定位警报弹出窗口。

如果您知道弹出窗口的大小，请按如下方式设置CSS：

.popup {
  position:absolute;
  top:50%; left:50%;
  width:320px; height:240px;
  margin-top:-120px; margin-left:-160px;
}

这会将左上角的弹出窗口放在页面的中心，然后负页边距正好将其居中。

嗯，谢谢你的回答，但我几个月前就这么做了，这是一个简单的CSS。我只是记性很差：（如果你看代码，它有0个javascript。它都是HTML和CSS制作的。我不能将它放在中间的唯一原因是因为它绝对是定位的，我必须这样做，因为如果不是每个帖子都会移动块。听起来你需要在开始编码之前对设计做更多的规划！）我不能使用javascript，因为这样会创建一个存储所有块的弹出窗口。每个块都需要自己的div。所有照片帖子不应该存储在一个弹出窗口中，它们需要自己的div。这就是为什么它们是这样计划的。@Earlarson这对我来说不足以进一步帮助您。我建议您在som上创建一个精简的测试用例这就像展示你的问题。Tumblr使用它自己的“块”.jsfiddle.net将不知道如何处理它们。请访问roseanebar.tumblr.com，我只希望每个弹出窗口都位于屏幕中央，即使它绝对位于屏幕中央。我在Safari中访问了您的网站，但没有看到任何对我有意义的内容。制作一个精简的测试用例。更新了我的OP。无法制作精简的测试用例，因为内容“阻塞”。仅供参考，该网站似乎很难使用Chrome，除非它的工作方式与我预期的大不相同。如果你收到“服务器容量过大”的消息，那就是Tumblr。我在使用Chrome。Tumblr没有保持其内容正常的好习惯。

 <body>
<div id="holder">
{block:Posts}
<div id="outer">
{block:Photo}
<img src="http://static.tumblr.com/ux4v5bf/zIrle9bek/block.png">
<div id="tooltip">

{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" />{LinkCloseTag}
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}

</div>
{/block:Photo}
</div>

<div id="outer">
{block:Text}
<img src="http://static.tumblr.com/ux4v5bf/zIrle9bek/block.png">
<div id="tooltip">

{block:Title}
<h1>{Title}</h1>{/block:Title}
{Body} {block:More}<p><a href="{Permalink}">Read on...</a></p>{/block:More}

</div>
{/block:Text}
</div>

{/block:Posts}

<div id="outer">
<img src="http://static.tumblr.com/ux4v5bf/zIrle9bek/block.png">
<div id="tooltip">

<h1>{Title}</h1>
{Description}

</div>
</div>
</div>

.popup {
  position:absolute;
  top:50%; left:50%;
  width:320px; height:240px;
  margin-top:-120px; margin-left:-160px;
}