Question

嗨，有人可以告诉我如何使用javascript将图像放在屏幕中央吗？

我会获得屏幕高度除以2吗？我如何获得屏幕高度？

谢谢！

Answer 1

进行Google搜索不会受到伤害......

以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解决方案，所以你会在下面找到一个。

我能看到js是必要的唯一两个原因是：

如果图像由于用户交互而居中或
如果图像必须居中一次，然后应保持静止（而不是像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

请参阅我的following answer

将图像定位在屏幕中间

4 个答案: