javascript 将图像定位在屏幕中间

Positioning an image in middle of the screen

提问by Mr Cricket

Hi can someone please tell me how to position an image in the centre of the screen using javascript?

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

Would I get the screen height and divide by 2? How would I get the screen height?

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

Thanks!

谢谢！

回答by Sebastián Grignoli

Making a Google search wouldn't hurt...

进行谷歌搜索不会有什么坏处...

Centering with CSS:

使用 CSS 居中：

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

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

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

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

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

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

Centering with javascript (jQuery):

使用 javascript (jQuery) 居中：

Using jQuery to center a DIV on the screen

使用 jQuery 在屏幕上居中一个 DIV

回答by Cam

Really, CSS is the best way to do this (as per Sebastián's answer), and if you have to use JS then go for jQuery. However you asked for a javascript solution so you'll find one below.

确实，CSS 是做到这一点的最佳方式（根据 Sebastián 的回答），如果您必须使用 JS，那么请使用 jQuery。但是，您要求提供一个 javascript 解决方案，因此您会在下面找到一个。

Really the only two reaons I can see js being necessary are:

实际上，我认为需要使用 js 的两个原因是：

1. If the image is to be centered as a result of user interaction or
2. If the image has to be centered once, and then should remain static (instead of remaining centered, as would happen with a CSS solution).

1. 如果图像由于用户交互而居中或
2. 如果图像必须居中一次，然后应该保持静态（而不是像 CSS 解决方案那样保持居中）。

Anyways... enjoy:

无论如何......享受：

Usage:

用法：

imgToMiddle('imageid');

Note that 'imageid' is the id of the image you want to place in the screen's center. The function modifies the image's css properties to place it in the middle of the screen.

请注意，'imageid' 是您要放置在屏幕中心的图像的 ID。该函数修改图像的 css 属性以将其放置在屏幕中间。

Code:

代码：

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

回答by TARKUS

This is a modification of Cam's answer (which I got to work with some slight modification). This answer features a little more jQuery, and most importantly, the position:fixed, so that the resulting div will always be squarely in the middle of your viewport, no matter how far down or up you have to scroll.

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

回答by cetnar

Please refer to my following answer

请参考我下面的回答