Databases
StackOverflow2013
Postsdbo
POCentering DIV Horizontally & Vertically on Page Load
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCentering DIV Horizontally & Vertically on Page Load
    text
    copied!<p>How can I center a DIV both horizontally and vertically immediately when the page loads?</p> <p>I am currently using the following solution:</p> <p><strong>HTML:</strong></p> <pre><code>&lt;div class="container"&gt; &lt;div class="visitorSelect"&gt; &lt;a href="/visitorLog/boeing"&gt; &lt;div class="tile double icon bg-color-blue"&gt; &lt;div class="tile-content"&gt; &lt;i class="icon-plane"&gt;&lt;/i&gt; &lt;/div&gt; &lt;div class="brand"&gt; &lt;span class="name"&gt;Employee&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;/a&gt; &lt;a href="/visitorLog/guest"&gt; &lt;div class="tile double icon bg-color-orange"&gt; &lt;div class="tile-content"&gt; &lt;i class="icon-group"&gt;&lt;/i&gt; &lt;/div&gt; &lt;div class="brand"&gt; &lt;span class="name"&gt;Guest&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;/a&gt; &lt;/div&gt; &lt;!-- visitorSelect --&gt; &lt;/div&gt; &lt;!-- container --&gt; </code></pre> <p><strong>JavaScript:</strong></p> <pre><code>&lt;script&gt; $(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(); }); &lt;/script&gt; </code></pre> <p>When I initially load the page, the <code>DIV</code> 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 <em>exactly</em> where it should.</p> <p>What additional steps do I need to take to cause the centering properly place the element at the time the document loads?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload