使用 Javascript 居中文本并使用 css3 视口调整大小在调整大小时很生涩

Question

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

http://justthetemp.com/

我有一个天气网站，显示温度和温度。我以几种方式显示温度。如果他们以前访问过，我会将 temp 存储在本地存储中并显示它，直到我可以使用我的 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;
  }

这是根据页面视口调整文本大小的 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");
}