使用 .outerWidth()/.outerHeight() 将 margin/padding 的元素居中。函数 returns 边距和填充的不同值

Question

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

我正在使用以下公式计算必要的 space：

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

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

问题

虽然我的代码 returns 顶部、右侧、左侧和底部的预期值，但它没有使用填充来做到这一点？知道是什么原因造成的吗？

HTML

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

  </div>
</div>

CSS

    html {
      box-sizing: border-box;
    }
    *, *:before, *:after {
      box-sizing: inherit;
    }

.outer {
      width:500px;
      height:200px;
      border:1px solid black;
      margin:20px;
    }

    .inner {
      width:100px;
      height:100px;
      background-color:grey;
    }

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 - link

Answer 1

发生这种情况是因为您将 padding 设置为内部框而不是外部框。

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

这是工作片段。您可以同时测试 renderStyle("margin"); 和 renderStyle("padding");

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) {
  var xi = getSpace("x");
  var yi = getSpace("y");
  if (spacingType == "padding") {
      var $ei = $outer;
  } else if (spacingType == "margin") {
      var $ei = $inner;
    } 
  $.each(["top", "right", "bottom", "left"], function(index, direction) {
    if (direction == "top" || direction == "bottom") {
      $ei.css(spacingType + "-" + direction, yi);
    }
    else if (direction == "right" || direction == "left") {
      $ei.css(spacingType + "-" + direction, xi);
    }                                     
  });                
}; 

renderStyle("padding");

.outer {
  width:400px;
  height:200px;
  border:1px solid black;
  margin:20px;
  box-sizing:border-box;
}
.inner {
  width:100px;
  height:100px;
  background-color:grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

使用 .outerWidth()/.outerHeight() 将 margin/padding 的元素居中。函数 returns 边距和填充的不同值

Centering elements with margin/padding using .outerWidth()/.outerHeight(). Function returns different values for margin and padding

javascript

css

jquery

outerwidth

outerheight