Javascript 尝试使用outerWidth（）和$（window）.resize（）将动态宽度的元素水平居中时出现意外行为

编辑1（将问题简化为JSFIDLE）：

我删除了原始问题中一些不必要的细节

我正在尝试将弹出窗口居中。由于它将如何在原始上下文中使用，弹出窗口的宽度将是动态的。它唯一的内容是文本，但不知道文本的长度。在大多数情况下，它将适合一行，但如果文本较长，用户的屏幕分辨率较低，它可能需要占用2行，我想保留屏幕上的所有文本。文本在JSFIDLE中是静态的，因此这显然不是导致问题的原因。我只是想澄清一下，以防有人想知道为什么我没有尝试设置弹出窗口的宽度。我使用jquery获得宽度，使用outerWidth（）和$（window）.resize（）在调整浏览器窗口大小时触发居中函数

只要弹出窗口的宽度小于包含它的元素，它就可以正常工作。我想弹出窗口只是采取其容器的全部宽度，如果它是足够小，文本必须去两行。正如您将在下面的视频中看到的，如果对浏览器窗口大小进行了较大调整，则不会始终正确报告宽度，这会导致元素的左侧有一个空间，而不是居中。换句话说，outerWidth（）报告的宽度与浏览器呈现的宽度不同

有关问题的演示，请参阅此视频：

这在Firefox、Chrome、IE、Opera和Safari中都发生了。也许这是jquery的outerWidth函数的问题。或者也许我不明白它应该如何工作。有没有其他方法来完成我想做的事情

这是javascript，没有什么太复杂的：

function center_horizontally(id)
{
    var windowWidth = document.documentElement.clientWidth;
    var popupWidth = $(id).outerWidth();

    var new_left = Math.max(0, windowWidth/2 - popupWidth / 2);

    ...

    $(id).css('left', new_left + 'px');
}

$(function(){
    $(window).resize(function() {
        center_horizontally('#popup');
    });

    center_horizontally('#popup');
});

唯一重要的css是弹出窗口具有位置：固定且没有设置宽度或高度。如果我设置弹出窗口的宽度，它会像应该的那样沿着左侧粘贴，但文本会超出右侧边界。我想保留屏幕上的所有文本，并让它采取全宽，并跳下一些文本到下一行，如果需要的话。当宽度变得足够低时，我只希望通知占据整个查看区域的宽度

编辑2（解决方案）：

多亏了我得到的帮助，这就是我最终使用的解决方案

---

弹出窗口没有重新定位，而是保留自动宽度和显示：内联块。它们包含在一个具有固定位置的div内。调整窗口大小时，包含的div将调整大小并重新定位。通过更改函数中的数字，可以指定窗口缩小时，弹出窗口外的水平空间大小。可能有一种方法只使用css就可以做到这一点，但我很高兴现在有了一些功能。

所以我可能会误解，但你根本不需要JS来实现这个效果。这看起来像是一个打败仗的案子！使用JS锤子而不是CSS fu来解决问题。我在下面的HTML中包含了两个示例，一个仅包含一行文本，另一个包含更多文本（当我将其插入小提琴时为3行）

我没有一个该死的小提琴帐户，所以这里是你小提琴的相关作品：

1） 不需要JS。（尤其是像outerwidth等可能导致不必要的回流/重涂的东西

2） HTML

--编辑--以问题顶部为中心的ALT版本意味着：

HTML

---

+1对于问题的视频描述：]您能发布文本气泡的样式吗？我不知道这是否是原因，但可以尝试：

var-timer$调整大小（函数（）{clearTimeout（timer）；timer=setTimeout（函数（）{center_horizontal（'#subtitle_notice'）；}，100）；/*您的其他调整大小代码*/}）这仅在停止调整大小后触发。我不确定它是否有用，但值得一试。我们需要更多关于
#subtitle\u注意
。它是绝对的还是相对的？它有利润吗？请发布更多的代码（CSS）或一把小提琴。谢谢你的快速回复。我用CSS细节编辑了我的帖子。今晚晚些时候我得试试计时器，因为我得离开几个小时。如果这不起作用，我将制作一个简化的JSFIDLE。这是假设您的帖子中的这句话：“它像应该的那样粘在左边”推断您希望它正常地粘在屏幕的左边。。。我只是重新阅读了你的信息，并将尝试水平居中，看看这是否是你的意思。是的，为困惑感到抱歉。除非我遗漏了一些明显的东西，否则当宽度设置为“自动”时，不可能将其放置在中间，两边都留有空间。我知道如何像那样居中的唯一方法是使用自动边距，这需要设置宽度。我可以确定空间的宽度何时太小，并将css更改为宽度：100%。但如果有可能的话，我必须做一些更疯狂的js来实现这一点。我一直在使用内联块（可能太多了），我从来没有想到在这里使用它。谢谢你的帮助！100%的宽度使屏幕的右侧有点脱离了边框等等，但我可以解决这个问题。没有问题，如果你将该元素设置为框大小：border box；祝你好运。我甚至不知道财产的存在，很高兴知道。在我的例子中，我最终决定在盒子周围留点空间看起来更好。最后我又使用了javascript。它完全按照我的要求工作，我在上面添加了一个新的JSFIDLE。也许只使用css是可能的，但在几次尝试失败后我放弃了。
<div id="popup">
    This is some sample text, just a little bit of sample text.
</div>
<div id="popup" style="top:120px;">
    This is some sample text, just a little bit of sample text.
    This is some sample This is some sample text, just a little bit of sample text.
    This is some sample This is some sample text, just a little bit of sample text.
    This is some sample 
</div>

#popup {
  background: #FFF;
  position: fixed;
  top: 50px;
  left: 0;
  border: 1px solid #000;
  box-shadow: 0 0 3px #CCC;
  padding: 10px; 
  width:auto;
  max-width:100%;
}

<div id="popupWrapper">
    <div id="popup">
        This is some sample text, just a little bit of sample text. little bit 
    </div>
    <div id="popup">
        This is some sample text, just a little bit of sample text. little bit of s little bit of s little bit of s
    </div>
    <div id="popup" style="top:120px;">
        This is some sample text, just a little bit of sample text.
         This is some sample This is some sample text, just a little bit of sample text.
         This is some sample This is some sample text, just a little bit of sample text.
         This is some sample 
    </div>
</div>

#popupWrapper {
    width: 100%;
    text-align:center;
    position:absolute;
}

#popup {
    background: #FFF;
    top: 50px;
    border: 1px solid #000;
    box-shadow: 0 0 3px #CCC;
    padding: 10px;
    max-width:100%;
    display: inline-block;
}