Javascript 使用.outerWidth（）/.outerHeight（）将带有边距/填充的元素居中。函数为边距和填充返回不同的值

我试图通过计算父元素和子元素的宽度和高度的差异，并使用差异作为边距或填充，在父元素中横向和垂直居中元素

我使用以下公式计算必要的空间：

($outerElement.outerWidth() - $innerElement.outerWidth() / 2;
($outerElement.outerHeight() - $innerElement.outerHeight() / 2;

然后，我使用一个函数在一个方向数组上循环，该函数允许我使用函数参数更改应用于子元素的css。基本上，该函数允许我选择是否使用边距或填充

问题

虽然我的代码返回top、right、left和bottom的预期值，但它不使用padding？你知道这是什么原因吗

HTML

<div id="demo" class="outer">
  <div class="inner">

  </div>
</div>

JAVASCRIPT

var $outer = $(".outer");
var $inner = $(".inner");

var getSpace = function(axis)  {

  if (axis.toLowerCase() == "x") {

    return ($outer.outerWidth() - $inner.outerWidth()) / 2;

  } else if (axis.toLowerCase() == "y") {

    return ($outer.outerHeight() - $inner.outerHeight()) / 2;

  }  

}

var renderStyle = function(spacingType) {

  $.each(["top", "right", "bottom", "left"], function(index, direction) {

    if (direction == "top" || direction == "bottom") {

      $inner.css(spacingType + "-" + direction, getSpace("y"));

      console.log(getSpace("y"));

    } else if (direction == "right" || direction == "left") {

      $inner.css(spacingType + "-" + direction, getSpace("x"));

      console.log(getSpace("x"));

    }                                     

  });                

}; 

renderStyle("padding");

---

CODEPEN-LINK-

发生这种情况是因为您将

填充设置为内部框而不是外部框

您可以使用
if
条件进行设置

下面是工作片段。您可以测试它的
renderStyle（“margin”）和
渲染样式（“填充”）


var$outer=$（“.outer”）；
变量$inner=$（“.inner”）；
var getSpace=函数（轴）{
if（axis.toLowerCase（）=“x”）{
返回（$outer.outerWidth（）-$inner.outerWidth（））/2；
}
else if（axis.toLowerCase（）=“y”）{
返回（$outer.outerHeight（）-$inner.outerHeight（））/2；
}  
}
var renderStyle=函数（spacingType）{
变量席＝GETSACE（“X”）；
var yi=getSpace（“y”）；
如果（间距类型==“填充”）{
var$ei=$outer；
}else if（间距类型==“边距”）{
var$ei=$inner；
} 
$。每个（[“顶部”、“右侧”、“底部”、“左侧”]，函数（索引、方向）{
如果（方向==“顶部”| |方向==“底部”）{
$ei.css（间距类型+“-”+方向，yi）；
}
else if（方向==“右”| |方向==“左”）{
$ei.css（间距类型+“-”+方向，xi）；
}                                     
});                
}; 
渲染样式（“填充”）
.outer{
宽度：400px；
高度：200px；
边框：1px纯黑；
利润率：20px；
框大小：边框框；
}
.内部{
宽度：100px；
高度：100px；
背景颜色：灰色；
}

您在JS中这样做而不是使用CSS来居中元素的原因是什么，的确，你可以用CSS来实现这一点，但是这个snippit只是一个更大插件的一部分。最终产品将使用“调整大小”事件和%值以及像素动态重新计算宽度和高度。此外，我将扩展代码以使用绝对定位。主要的问题不是使用宽度，而是使用高度，因为它们往往不会响应太大的百分比值，它们也会按照您希望的方式工作。例如，顶部或底部边距/填充百分比以及高度。非常感谢，我知道我的模型缺少一些基本的东西。当然，填充必须添加到外部元素。
var $outer = $(".outer");
var $inner = $(".inner");

var getSpace = function(axis)  {

  if (axis.toLowerCase() == "x") {

    return ($outer.outerWidth() - $inner.outerWidth()) / 2;

  } else if (axis.toLowerCase() == "y") {

    return ($outer.outerHeight() - $inner.outerHeight()) / 2;

  }  

}

var renderStyle = function(spacingType) {

  $.each(["top", "right", "bottom", "left"], function(index, direction) {

    if (direction == "top" || direction == "bottom") {

      $inner.css(spacingType + "-" + direction, getSpace("y"));

      console.log(getSpace("y"));

    } else if (direction == "right" || direction == "left") {

      $inner.css(spacingType + "-" + direction, getSpace("x"));

      console.log(getSpace("x"));

    }                                     

  });                

}; 

renderStyle("padding");