Javascript 将图像定位在屏幕中间

嗨，有人能告诉我如何使用javascript在屏幕中央定位图像吗

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

谢谢

以CSS为中心：

以javascript（jQuery）为中心：

---

实际上，CSS是实现这一点的最佳方式（根据Sebastián的回答），如果必须使用JS，那么就使用jQuery。不过，您需要一个javascript解决方案，因此您可以在下面找到一个

事实上，我认为js唯一必要的两个原因是：

如果由于用户交互或

如果图像必须居中一次，然后应该保持静态（而不是像CSS解决方案那样保持居中）

无论如何。。。享受：

用法：

imgToMiddle('imageid');

    //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;
    }

请注意，“imageid”是要放置在屏幕中央的图像的id。函数修改图像的CSS属性，将其放置在屏幕的中间。

代码：

imgToMiddle('imageid');

    //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;
    }

---

请参阅我的

这是对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.
}

---

使用javascript？这有点奇怪。使用CSS不能很快做到这一点吗？答案中没有一部分涉及纯javascript解决方案（您提到了jquery，但OP没有要求）。然而，CSS可能是实现这一点的最佳方式，如果使用javascript，jQuery可能是最佳选择。因此+1:）jQuery版本远比纯Javascrip版本优雅，因为所有浏览器兼容性问题都已经由jQuery解决了。我的建议是尽可能使用jQuery。感谢upvote.jQuery是2010年的最佳选择。。。现在到2020年，这可能不是最好的建议。你的代码运行得很好，但我对它做了一些修改，并将它作为一个更多的答案发布，但要参考你的答案。