將圖像定位在屏幕中間

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) 居中：

使用 jQuery 將 DIV 居中顯示在屏幕上

Answer 2

確實，CSS 是做到這一點的最佳方式（根據 Sebastián 的回答），如果您必須使用 JS，那么請使用 jQuery。 但是，您要求提供一個 javascript 解決方案，因此您會在下面找到一個。

實際上，我認為需要使用 js 的兩個原因是：

1. 如果圖像因用戶交互而居中或
2. 如果圖像必須居中一次，然后應該保持靜態（而不是像 CSS 解決方案那樣保持居中）。

無論如何......享受：

用法：

imgToMiddle('imageid');

請注意，'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

這是對 Cam 答案的修改（我對其進行了一些輕微修改）。 這個答案有更多的 jQuery，最重要的是，位置：固定，這樣生成的 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.
}

Answer 4

請參考我下面的回答