Adaptive vertical alignment

Design help General
1

Hello fellow Webflow users,

I’m trying to vertically align my hero div inside a div section called hero-section.

The height of hero-section is determined by the size of the browser window with JavaScript.

  Webflow.push(function () {
    var fulls = $('.hero-section');
    var win = $(window);
    Webflow.resize.on(function () {
      fulls.height(win.height());
    });
  });

I can align the hero div vertically (by using position relative, top 50%, transformY -50% for example), but it won’t adapt to lower resolutions. My content doesn’t fit in lower laptop resolutions like 1366x768 for example.

How do I center the hero div vertically while making the margins adapt to the win.height?

Link to the site:
http://hipstastickerv2.webflow.com/

Thanks!

2 
function fullsection() {
	$('.hero-section').css('height', $(window).height());
	var paddingtop = $(window).height()/2 - $('.hero-div').height()/2;
	if (paddingtop >= 0) {
		$('.hero-div').css('padding-top', paddingtop);
	} else {
		$$('.hero-div').css('padding-top', 0);
	}
}
$(document).ready(function() {
	fullsection();
	$(window).resize(function() {
		fullsection();
	});
});