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

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

Thanks!

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

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

Thanks!

• javascript

Share Improve this question Follow edited Aug 23, 2010 at 4:39 avpaderno 29.8k1717 gold badges7878 silver badges9494 bronze badges asked Aug 23, 2010 at 4:20 Mr CricketMr Cricket 48344 gold badges1010 silver badges1414 bronze badges 1

• 1 With javascript? Thats kind of strange. Couldn't this be done very quickly using CSS? – tr4656 Commented Aug 23, 2010 at 4:28

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

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.

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

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).

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.

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

Centering with CSS:

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

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

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

Centering with javascript (jQuery):

Using jQuery to center a DIV on the screen

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.

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.
}

Please refer to my following answer