Question

如何在页面加载时立即水平和垂直居中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到中心显示在页面右侧并略低于垂直中心。但是，当我手动调整页面大小时，它会完全按。

在文档加载时，我需要采取哪些额外步骤才能使对中元素正确放置？

Answer 1

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

以下是CSS的示例：

div.container{
  width:100%;
  height:100%;
}
div.visitorSelect {
  width:200px;
  height:200px;
  margin:auto;
}

Answer 2

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

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

您可能应该在CSS或ready（）函数中的resize事件函数之外设置位置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(); });

Answer 3

一旦页面加载，您应该定位 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>

将DIV水平对中和放大垂直于页面加载

3 个答案: