responsive design - Vertical align using jquery for all devices? -

i found problematic thing align vertically elements on page, without changing others elements layouts.

the problem magnified on mobile devices. many screen sizes, resolutions, portrait, landscape...

var x=window.innerheight - $('#mydiv').height();     $('#mydiv').css ('margin-top', x/2); 

this should ok devices, mobile , desktop. see downside of these approach?

as understand, devices today support javascript. but, possible device supports js doesn't support jquery ?

you should use $('#mydiv').parent().height() instead of window.innerheight, because if #mydiv element wrapped element, approach may not work correctly.
can encapsulate codes jquery plugin, this:

jquery.fn.verticalalign = function () {     return             .css("margin-top",($(this).parent().height() - $(this).height())/2 + 'px' ) }; 

then can use like:

$('#mydiv').verticalalign(); 

is possible device support js doesn't support jquery ? no, devices support proper version of js must sopport jquery, because core of jquery pure js
if want align element vertically in browser screen, may use following instead:

jquery.fn.verticalalignscreen = function () {     return             .css("position", "absolute")             .css("top", math.max(0, (($(window).height() - $(this).outerheight()) / 2) + $(window).scrolltop()) + "px"); };