在屏幕中間定位圖像

Question

嗨，有人能告訴我如何使用JavaScript在屏幕中心定位圖像嗎？

我會得到屏幕高度除以2嗎？我如何獲得屏幕高度？

謝謝！

Answer 1

使谷歌搜索不會傷害......

與CSS定心：

http://www.bluerobot.com/web/css/center1.html

http://www.spanish-translator-services.com/espanol/t/007/center.html

http://simplebits.com/notebook/2004/09/08/centering/

與JavaScript（jQuery的）定心：

Using jQuery to center a DIV on the screen

Answer 2

真的，CSS是最好的方式來做到這一點（根據Sebastián的回答），如果你必須使用JS然後去jQuery。但是，您要求提供JavaScript解決方案，因此您會在下面找到一個。

真的只有兩個reaons我可以看到的js是必要有：

1. 如果圖像爲中心作爲用戶交互的結果或
2. 如果圖像需要進行一次中心，和那麼應該保持靜態（而不是保持居中，就像在CSS解決方案中那樣）。

反正...享受：

用法：

imgToMiddle('imageid'); 

注意， '圖像標識' 是要在屏幕的中心放置圖像的ID。該函數修改圖像的CSS屬性，將其放置在屏幕中間。

代碼：

//viewport width/height code from here: http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/ 

    function imgToMiddle(imgid){ 
     function viewportWidth(){ 
      var viewportwidth; 

      if (typeof window.innerWidth != 'undefined'){ 
       viewportwidth = window.innerWidth; 
      } 

      else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0){ 
       viewportwidth = document.documentElement.clientWidth; 
      } 
      else{ 
       viewportwidth = document.getElementsByTagName('body')[0].clientWidth; 
      } 
      return viewportwidth; 
     } 

     function viewportHeight(){ 
      var viewportheight; 

      if (typeof window.innerWidth != 'undefined'){ 
       viewportheight = window.innerHeight; 
      } 

      else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0){ 
       viewportheight = document.documentElement.clientHeight; 
      } 
      else{ 
       viewportheight = document.getElementsByTagName('body')[0].clientHeight; 
      } 
      return viewportheight; 
     } 
     var img=document.getElementById(imgid); 

     img.style.position="absolute"; 
     img.style.left=viewportWidth()/2-img.width/2; 
     img.style.top=viewportHeight()/2-img.height/2; 
    } 

Answer 3

請參考我following answer

Answer 4

這是凸輪的回答修改（我有一些輕微的修改工作）。這個答案提供了更多的jQuery，最重要的是，position：fixed，這樣無論你需要滾動多少或多少，結果div總是在你的視口中間。

function imgToMiddle(imgid){ 

    function viewportWidth(){ 
     var viewportwidth; 

     if (typeof window.innerWidth != 'undefined'){ 
      viewportwidth = window.innerWidth; 
     } 

     else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0){ 
      viewportwidth = document.documentElement.clientWidth; 
     } 
     else{ 
      viewportwidth = document.getElementsByTagName('body')[0].clientWidth; 
     } 
     return viewportwidth; 
    } 

    function viewportHeight(){ 
     var viewportheight; 

     if (typeof window.innerWidth != 'undefined'){ 
      viewportheight = window.innerHeight; 
     } 

     else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0){ 
      viewportheight = document.documentElement.clientHeight; 
     } 
     else{ 
      viewportheight = document.getElementsByTagName('body')[0].clientHeight; 
     } 
     return viewportheight; 
    } 
    var img=document.getElementById(imgid); 

    $(img).css("position","fixed");//note: position:"fixed" will keep the div exactly in the middle of your browser viewport. This can be useful as a modal dialog box. 
    $(img).css("left",parseInt(viewportWidth()/2) - 100);//note: "100" is half the width of the target div. 
    $(img).css("top",parseInt(viewportHeight()/2) - 100);//note: "100" is half the height of the target div. 
}