jQuery CSS method update on resize?

Question

After struggling to vertically centre a div inside the body element using the "conventional" methods, I've decided to create a small jQuery function that figures out how far from the top an element needs to be to be "centred".

It works like this:

1. Get container height,
2. Get child height,
3. "top" = "(container.height - child.height) / 2"
4. Set margin top of child to the value of "top" .

For example if the body had a width and height of 1000px and this body had a div.inner child that had a width and height of 400px the margin-top of div.inner would be 300px because (1000-400) / 2 = 300 .

Here is a diagram to further explain what I mean:

NOTE : X represents the margin-top of the div.inner (as I didn't have enough space for "Margin Top = " ).

To my amazement this actually works!!! Here is the test code:

 // set the margin top for ".vertical-centre" elements $(".vertical-centre").each(function() { // set the margin-top for the child $(this).css("margin-top", function() { // NOTE: margin = (container.height - child.height) / 2 var margin = ($(this).parent().height() - $(this).height()) / 2; // default the margin to zero if it's a negative number // round the margin down to the nearest whole number // specify that the margin-top is in pixels return Math.floor(Math.max(0, margin)) + "px"; }); }); 

 body { width: 100px; height: 100px; margin: 0; padding: 0; border: 1px solid black } div.inner { width: 40px; height: 40px; background-color: blue } .horizontal-centre { display: block; margin-left: auto; margin-right: auto } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="inner horizontal-centre vertical-centre"></div> 

NOTE : I made the example above smaller so you could see it properly.

Unfortunately though, there is now another problem, when I resize the browser the margin-top of the div.inner element stays the same.

I would like for it to be responsive and update it's margin-top property to the appropriate value when the window has been resized otherwise div.inner will go out of view and the page will look a like this:

Answer 1

Wrap you code in a function

function align() {
  $(".vertical-centre").each(function() {
    // set the margin-top for the child
    $(this).css("margin-top", function() {
      // NOTE: margin = (container.height - child.height) / 2
      var margin = ($(this).parent().height() - $(this).height()) / 2;
      // default the margin to zero if it's a negative number
      // round the margin down to the nearest whole number
      // specify that the margin-top is in pixels
      return Math.floor(Math.max(0, margin)) + "px";
    });
  });
}

And run it on window resize as well

align(); // first run
$(window).on('resize', align); // when window resize

Answer 2

You could use https://api.jquery.com/resize/

Create a function of your code

function init_center() {..

Try calling the init_center function from the resize event of window

SNIPPET

 function init_center() { // set the margin top for ".vertical-centre" elements $(".vertical-centre").each(function() { // set the margin-top for the child $(this).css("margin-top", function() { // NOTE: margin = (container.height - child.height) / 2 var margin = ($(this).parent().height() - $(this).height()) / 2; // default the margin to zero if it's a negative number // round the margin down to the nearest whole number // specify that the margin-top is in pixels return Math.floor(Math.max(0, margin)) + "px"; }); }); } $( window ).resize(init_center); // Handle resize of window init_center(); // Doing it first time 

 body { width: 400px; height: 400px; margin: 0; padding: 0; border: 1px solid black } div.inner { width: 200px; height: 200px; background-color: blue } .horizontal-centre { display: block; margin-left: auto; margin-right: auto } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="inner horizontal-centre vertical-centre"></div>