javascript - 使用 Javascript 将文本居中并使用 css3 viewport 调整大小在调整大小时会很不稳定

Question

当窗口调整大小时，我的文本保持居中并平滑地调整大小时遇到​​了一些问题。

http://justthetemp.com/

我有一个显示温度的天气网站，只显示温度。我以几种方式显示温度。如果他们之前访问过，我会将临时存储在本地存储中并显示它，直到我可以用我的 php 函数解析它。所以一切似乎都正常，除非我调整页面大小时。

我正在使用 jQuery 使文本居中。

      jQuery.fn.center = function () {
      this.css("position","absolute");
      this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
      this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
      return this;
  }

这是根据页面视口(viewport)调整文本大小的 css。

font-family:BebasNeueRegular;
src:url(BebasNeue-webfont.eot?#iefix) format(embedded-opentype), url(BebasNeue-webfont.ttf) format(truetype), url(BebasNeue-webfont.svg#BebasNeueRegular) format(svg);
font-weight:500;
font-style:normal;
font-size:45vw;
position:relative;

如有任何提示，我们将不胜感激。

谢谢

Answer 1

这应该可以解决问题!

window.onresize = resize;
function resize(){
             $("#fn").css("top", ( $(window).height() - $("#fn").height() ) / 2+$(window).scrollTop() + "px");
             $("#fn").css("left", ( $(window).width() - $("#fn").width() ) / 2+$(window).scrollLeft() + "px");

}