调整大小的jQuery CSS方法更新？

Question

在使用“常规”方法努力将div 垂直居中在body 元素内之后，我决定创建一个小的jQuery 函数来计算元素需要离顶部多远“居中”。

它是这样工作的：

1. 获取容器高度，
2. 获取孩子身高，
3. "top" = "(container.height - child.height) / 2"
4. 将子元素的顶部边距设置为 "top" 的值。

例如，如果body 的宽度和高度为1000px，而此body 的div.inner 子级的宽度和高度为400px，则margin-top 的div.inner 将是300px 因为(1000-400) / 2 = 300。

这是一个图表，可以进一步解释我的意思：

注意：X 代表div.inner 的margin-top（因为我没有足够的空间放置“Margin Top =”）。

令我惊讶的是，这确实有效！！！下面是测试代码：

// set the margin top for ".vertical-centre" elements
$(".vertical-centre").each(function() {
  // set the margin-top for the child
  $(this).css("margin-top", function() {
    // NOTE: margin = (container.height - child.height) / 2
    var margin = ($(this).parent().height() - $(this).height()) / 2;
    // default the margin to zero if it's a negative number
    // round the margin down to the nearest whole number
    // specify that the margin-top is in pixels
    return Math.floor(Math.max(0, margin)) + "px";
  });
});

body {
  width: 100px;
  height: 100px;
  margin: 0;
  padding: 0;
  border: 1px solid black
}
div.inner {
  width: 40px;
  height: 40px;
  background-color: blue
}
.horizontal-centre {
  display: block;
  margin-left: auto;
  margin-right: auto
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inner horizontal-centre vertical-centre"></div>

注意：我将上面的示例缩小了，以便您可以正确查看。

不幸的是，现在还有另一个问题，当我调整浏览器大小时，div.inner 元素的margin-top 保持不变。

我希望它能够响应并在调整窗口大小时将其margin-top 属性更新为适当的值，否则div.inner 将消失，页面将如下所示：

Answer 1

你可以使用https://api.jquery.com/resize/

为你的代码创建一个函数

function init_center() {..

尝试从窗口的resize事件调用init_center函数

片段

function init_center() {
  // set the margin top for ".vertical-centre" elements
  $(".vertical-centre").each(function() {
    // set the margin-top for the child
    $(this).css("margin-top", function() {
      // NOTE: margin = (container.height - child.height) / 2
      var margin = ($(this).parent().height() - $(this).height()) / 2;
      // default the margin to zero if it's a negative number
      // round the margin down to the nearest whole number
      // specify that the margin-top is in pixels
      return Math.floor(Math.max(0, margin)) + "px";
    });
  });
}

$( window ).resize(init_center); // Handle resize of window

init_center(); // Doing it first time

body {
  width: 400px;
  height: 400px;
  margin: 0;
  padding: 0;
  border: 1px solid black
}

div.inner {
  width: 200px;
  height: 200px;
  background-color: blue
}

.horizontal-centre {
  display: block;
  margin-left: auto;
  margin-right: auto
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inner horizontal-centre vertical-centre"></div>

Answer 2

将代码封装在一个函数中

function align() {
  $(".vertical-centre").each(function() {
    // set the margin-top for the child
    $(this).css("margin-top", function() {
      // NOTE: margin = (container.height - child.height) / 2
      var margin = ($(this).parent().height() - $(this).height()) / 2;
      // default the margin to zero if it's a negative number
      // round the margin down to the nearest whole number
      // specify that the margin-top is in pixels
      return Math.floor(Math.max(0, margin)) + "px";
    });
  });
}

并在调整窗口大小时运行它

align(); // first run
$(window).on('resize', align); // when window resize