1

如何在页面加载时立即将 DIV 水平和垂直居中？

我目前正在使用以下解决方案：

HTML：

<div class="container">
  <div class="visitorSelect">
    <a href="/visitorLog/boeing">
      <div class="tile double icon bg-color-blue">
        <div class="tile-content">
          <i class="icon-plane"></i>
        </div>
        <div class="brand">
          <span class="name">Employee</span>
        </div>
      </div>
    </a>

    <a href="/visitorLog/guest">
      <div class="tile double icon bg-color-orange">
        <div class="tile-content">
          <i class="icon-group"></i>
        </div>
        <div class="brand">
          <span class="name">Guest</span>
        </div>
      </div>
    </a>
  </div> <!-- visitorSelect -->
</div> <!-- container -->

JavaScript：

<script>
$(document).ready(function()
{
  $(window).resize(function()
  {
    $('.visitorSelect').css(
    {
      position: 'absolute',
      left: ($(window).width() - $('.visitorSelect').outerWidth()) / 2,
      top: ($(window).height() - $('.visitorSelect').outerHeight()) / 2
    });
  });

  // call `resize` to center elements
  $(window).resize();
});
</script>

当我最初加载页面时，DIV到中心显示在页面的右侧，略低于垂直中心。但是，当我手动调整页面大小时，它会准确捕捉到它应该在的位置。

我需要采取哪些其他步骤才能在文档加载时使元素正确居中？

4

3 回答 3

1

除非这是某种模态或不寻常的东西，否则当 CSS Margin Auto 会为此工作时，我不会完全使用脚本来执行此操作。这是一个教程http://demo.tutorialzine.com/2010/03/centering-div-vertically-and-horizo​​ntally/demo.html

下面是一个 CSS 示例：

div.container{
  width:100%;
  height:100%;
}
div.visitorSelect {
  width:200px;
  height:200px;
  margin:auto;
}
于 2013-04-08T21:40:36.867 回答
1

在计算宽度之前将 .visitor 元素设置为绝对定位。

默认情况下，静态 div 将拉伸到父级的全宽；绝对 div 不会。这弄乱了你的第一个计算。

您可能应该在调整大小事件函数之外，在 CSS 或 ready() 函数中设置位置 css 规则。这是对代码更改最少的修复程序：

$(document).ready(function()
{
  $(window).resize(function()
  {
    $('.visitorSelect').css(
    {
      position: 'absolute'
    });

    $('.visitorSelect').css(
    {
      left: ($(window).width() - $('.visitorSelect').outerWidth()) / 2,
      top: ($(window).height() - $('.visitorSelect').outerHeight()) / 2
    });
  });

  // call `resize` to center elements
  $(window).resize();
});
于 2013-04-08T21:41:34.570 回答
0

页面加载后，您应该定位div ：

<script>
$(document).ready(function()
{
  $('.visitorSelect').css(
    {
      position: 'absolute',
      left: ($(window).width() - $('.visitorSelect').outerWidth()) / 2,
      top: ($(window).height() - $('.visitorSelect').outerHeight()) / 2
    });

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

  // call `resize` to center elements
  $(window).resize();
});
</script>
于 2013-04-08T21:39:26.277 回答