Question

I am trying to center a DIV in screen using below code but it is not working for me. Someone please suggest me to make it work

            var hnw = {};
            hnw.w = 0;
            hnw.h = 0;
            if (!window.innerWidth) {
                if (!(document.documentElement.clientWidth == 0)) {
                    hnw.w = document.documentElement.clientWidth;
                    hnw.h = document.documentElement.clientHeight;
                }
                else {
                    hnw.w = document.body.clientWidth;
                    hnw.h = document.body.clientHeight;
                }
            }
            else {
                hnw.w = window.innerWidth;
                hnw.h = window.innerHeight;
            }
            var midEle = document.createElement('div');
            var _x = 0;
            var _y = 0;
            var offsetX = 0;
            var offsetY = 0;
            if (!window.pageYOffset) {
                if (!(document.documentElement.scrollTop == 0)) {
                    offsetY = document.documentElement.scrollTop;
                    offsetX = document.documentElement.scrollLeft;
                }
                else {
                    offsetY = document.body.scrollTop;
                    offsetX = document.body.scrollLeft;
                }
            }
            else {
                offsetX = window.pageXOffset;
                offsetY = window.pageYOffset;
            }
            midEle.style.width = "300px";
            midEle.style.height = "300px";
            midEle.innerHTML = "Some Text";
            midEle.style.display = "block";
            var _x_w = parseInt(midEle.style.width, 10), _y_h = parseInt(midEle.style.height, 10);
            _x = ((hnw.w - _x_w) / 2) + offsetX;
            _y = ((hnw.h - _y_h) / 2) + offsetY;
            console.log(_x, " ", _y);
            midEle.style.position = "absolute";

            midEle.style.left = _x;
            midEle.style.top = _y;
            document.body.appendChild(midEle);

Answer 1

Can’t this be done with CSS instead?

Javascript:

var midEle = document.createElement('div');
midEle.className = 'centered';
document.body.appendChild(midEle);

​CSS:

​.centered{ 
    background-color: red;
    height: 300px;
    width: 300px;
    margin: -150px 0 0 -150px;
    top: 50%;
    left: 50%;
    position: fixed;
}​

http://jsfiddle.net/FkEyy/3/

By setting the margins to the negative half of the elements height and width, and setting top and left values to 50%, you’ll center the element. This is a common way of centering content with CSS 🙂