在页面加载中将DIV水平和垂直居中

Question

How can I center a DIV both horizontally and vertically immediately when the page loads?

I am currently using the following solution:

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>

When I initially load the page, the DIV to center shows up at the right of the page and slightly below the center of vertical. However, when I resize the page manually it snaps to exactly where it should.

What additional steps do I need to take to cause the centering properly place the element at the time the document loads?

Answer 1

Unless this is some kind of modal, or something unusual, I would not do this entirely with script when CSS Margin Auto will work for this. Here is a tutorial http://demo.tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/demo.html

Here is an example of the CSS:

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

Answer 2

Set the .visitor element to absolute positioning before you calculate the width.

By default static divs will stretch to the full width of the parent; absolute divs will not. This is messing up your first calculation.

You should probably set the position css rule outside of the resize event function, in either CSS or in the ready() function. Here's a fix with the least changes to your code:

$(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

You should position the div once the page loads:

<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>