2

我正在尝试使用以下代码将 DIV 在屏幕中居中，但它对我不起作用。有人请建议我让它工作 

            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);
4

3 回答 3

7

这不能用CSS来完成吗？

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/

通过将边距设置为元素高度和宽度的负一半，并将顶部和左侧值设置为 50%，您将居中元素。这是使用 CSS 使内容居中的常用方法 :)

于 2012-12-07T06:46:52.007 回答
3

缺少forleft和top样式属性。px值必须是px或%

改变

  midEle.style.left = _x;
  midEle.style.top = _y;

到

  midEle.style.left = _x+"px";
  midEle.style.top = _y+"px";

演示：http: //jsfiddle.net/muthkum/AFkKt/

于 2012-12-07T06:27:36.997 回答
2

如果您想使用 vanilla JavaScript 在浏览器视口中居中显示某些内容，这里有一个演示。

http://jsfiddle.net/CDtGR/5/

<html>
<!--measure size of elements, 
   get absolute position of elements, 
   get viewport size and scrollposition-->
<script>
var mesr =
{
    Metrics: {
        px: 1,
        measureUnits: function(target) {
            if(typeof(target) == 'undefined')
                target = document.getElementsByTagName('body')[0];
            mesr.Metrics.measureUnit("em", target);
            mesr.Metrics.measureUnit("pt", target);
            mesr.Metrics.measureUnit("%", target);
        },
        measureUnit: function(unit, target) {
            if(typeof(target.Metrics) == 'undefined')
                target.Metrics = {};
            var measureTarget = target;
            if(target.tagName == 'IMG' && typeof(target.parentNode) != 'undefined')
                measureTarget = target.parentNode;
            var measureElement = document.createElement("div");
            measureElement.style.width = "1"+unit;
            measureElement.style.cssFloat = "left";
            measureElement.style.styleFloat = "left";
            measureElement.style.margin = "0px";
            measureElement.style.padding = "0px";            
            measureTarget.appendChild(measureElement);
            target.Metrics[unit] = measureElement.offsetWidth;
            measureElement.parentNode.removeChild(measureElement);
            return target.Metrics[unit];
        },
        getUnitPixels: function(unitString, target) {
            if(typeof(target) == 'undefined')
                target = document.getElementsByTagName('body')[0];
            if(typeof(target.Metrics) == 'undefined')
                mesr.Metrics.measureUnits(target);
            var unit = unitString.replace(/[0-9\s]+/ig,'').toLowerCase();
            var size = Number(unitString.replace(/[^0-9]+/ig,''));            
            if(typeof(target.Metrics[unit]) == 'undefined')
                return 0;
            var metricSize = target.Metrics[unit];
            var pixels = Math.floor(Number(metricSize * size));
            return pixels;
        }
    },    
    getElementOffset: function(target) {
        var pos = [target.offsetLeft,target.offsetTop];
        if(target.offsetParent != null) {
            var offsetPos = mesr.getElementOffset(target.offsetParent);
            pos =     [
                    pos[0] + offsetPos[0],
                    pos[1] + offsetPos[1]
                    ];
        }
        return pos;
    },
    getElementPosition: function(target) {

        var offset = mesr.getElementOffset(target);
        var x = offset[0] +
        mesr.Metrics.getUnitPixels(target.style.paddingLeft, target) +
        mesr.Metrics.getUnitPixels(target.style.borderLeftWidth, target);
        var y = offset[1] +
        mesr.Metrics.getUnitPixels(target.style.paddingTop, target) +
        mesr.Metrics.getUnitPixels(target.style.borderTopWidth, target);
        return [x,y];
    },    
    getElementSize: function(target) {
        var size = [target.offsetWidth, target.offsetHeight];
        size[0] -=     mesr.Metrics.getUnitPixels(target.style.paddingLeft, target) +
                    mesr.Metrics.getUnitPixels(target.style.paddingRight, target) +
                    mesr.Metrics.getUnitPixels(target.style.borderLeftWidth, target) +
                    mesr.Metrics.getUnitPixels(target.style.borderRightWidth, target);
        size[1] -=     mesr.Metrics.getUnitPixels(target.style.paddingTop, target) +
                    mesr.Metrics.getUnitPixels(target.style.paddingBottom, target) +
                    mesr.Metrics.getUnitPixels(target.style.borderTopWidth, target) +
                    mesr.Metrics.getUnitPixels(target.style.borderBottomWidth, target);
        return size;
    },
    getViewPortSize: function () {
          var myWidth = 0, myHeight = 0;
          if( typeof( window.innerWidth ) == 'number' ) {
            myWidth = window.innerWidth;
            myHeight = window.innerHeight;
          } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
            myWidth = document.documentElement.clientWidth;
            myHeight = document.documentElement.clientHeight;
          } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
            myWidth = document.body.clientWidth;
            myHeight = document.body.clientHeight;
          }
        return [myWidth, myHeight];
    },
    getViewPortScrollPosition: function () {
      var scrOfX = 0, scrOfY = 0;
      if( typeof( window.pageYOffset ) == 'number' ) {
        scrOfY = window.pageYOffset;
        scrOfX = window.pageXOffset;
      } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
        scrOfY = document.body.scrollTop;
        scrOfX = document.body.scrollLeft;
      } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
        scrOfY = document.documentElement.scrollTop;
        scrOfX = document.documentElement.scrollLeft;
      }
      return [ scrOfX, scrOfY ];
    },
    attachEvent : function(target, eventList, func) {
        if(typeof (target) == "undefined" || target == null)
            return;
        var events = eventList.split(",");
        for(var i=0;i<events.length;i++) {
            var event = events[i];
            if(typeof(target.addEventListener) != 'undefined') {
                target.addEventListener(event, func);
            } else if(typeof(target.attachEvent) != 'undefined') {
                target.attachEvent('on'+event,func);
            } else {
                console.log("unable to attach event listener");
            }
        }
    }
}
</script>

<!--positioning-->
<script>
function position(){
    var viewPortSize = mesr.getViewPortSize();
    var viewPortScrollPos = mesr.getViewPortScrollPosition();
    var size = mesr.getElementSize(document.getElementById('apa'));
    document.getElementById('apa').style.left = Math.floor((viewPortSize[0]/2)-(size[0]/2)+viewPortScrollPos[0])+"px";
    document.getElementById('apa').style.top = Math.floor((viewPortSize[1]/2)-(size[1]/2)+viewPortScrollPos[1])+"px";
}    

mesr.attachEvent(window,"resize,scroll,load",position);    
mesr.attachEvent(document,"load",position); 
</script>

<body>

<div id="apa" style="position:absolute;">some text</div>

</body>

</html>
于 2012-12-07T07:13:31.313 回答