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>

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

我也很困惑，因为我目前在关闭正文标记之前直接链接到Javascript，但是当我在开始正文标记正下方添加第二个链接到相同的JS文件时，文本在某种程度上正确地对齐了先试试。

有谁知道发生了什么事？如何在第一次加载页面时水平和垂直正确对齐？

Answer 1

为什么不使用纯CSS解决方案，这样就不需要绑定到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>

Answer 2

在jquery或javascript中你应该创建一个函数并在准备好和调整大小时调用它：

＆＃13;

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

＆＃13;

/* see me */
#text-container {
  border: solid;
  position:absolute;/* <=== needs to be set in CSS too */
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer-container" id="text-container-container">
  <div class="container">
    <nav class="navbar navbar-default" role="navigation">
      navigation
    </nav>
    <div id="text-container">
      <h1>text</h1>
    </div>
  </div>
</div>

＆＃13;

Css很容易做到，最简单的就是使用flex我相信，但这不是问题：）

div的垂直居中仅在JS直接链接到AND正上方时才起作用？

2 个答案: