Positioning an image in middle of the screen

Question

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!

Answer 1

Centering with 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/

Centering with javascript (jQuery):

Using jQuery to center a DIV on the screen

Answer 2

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

Answer 3

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

Answer 4

Please refer to my following answer