javascript - 仅当 JS 直接链接在 下方和 上方时，div 的垂直居中才有效？

Question

我目前正在使用 bootstrap 并希望一些文本在垂直和水平方向上都居中。我写了一些 Javascript 将文本容器的 CSS 设置为绝对位置，然后计算顶部和左侧的像素以使 div 正确居中:

$(document).ready(function() {
    $(window).resize();
});

$(window).resize(function() {
    $('#text-container-container').css({
        height:($(window).height()),
    });
    $('#text-container').css({
        position: 'absolute',
        left: ($(window).width() - $('#text-container').outerWidth())/2,
        top: ($(window).height() - $('#text-container').outerHeight())/2,
    });
});

HTML:

<div class="outer-container" id="text-container-container">
  <div class="container">
    <nav class="navbar navbar-default" role="navigation">
      <!--navigation stuff here-->
    </nav>
    <div id="text-container">
      <h1>text</h1>
    </div>
  </div>
</div>

出于某种原因，当我加载页面时，文本正确地垂直 对齐，但没有正确地水平对齐。只有当我稍微改变浏览器窗口的大小时，文本才会到达正确的位置(水平和垂直)。

我也很困惑，因为我目前在结束 body 标签之前有指向 Javascript 的链接，但是当我在开始 body 标签正下方添加指向同一个 JS 文件的第二个链接时，文本以某种方式正确对齐第一次尝试。

有人知道这是怎么回事吗？我怎样才能让它在第一次加载页面时水平和垂直正确对齐？

Answer 1

你为什么不应用纯 CSS 解决方案，这样就不需要绑定(bind)到 resize() 函数，看这个:

#text-container-container, #text-container {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

#main-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

<div class="outer-container" id="text-container-container">
  <div class="container">
    <nav class="navbar navbar-default" role="navigation">
      <!--navigation stuff here-->
    </nav>
    <div id="text-container">
      <h1 id="main-text">text</h1>
    </div>
  </div>
</div>