How center megamenu inside a submenu?

Hi! First of all, I want to congrat you for this theme. You do an incredible job!

I need a megamenu in a submenu child item and I've managed to put it where I need it, but it's not centered on the screen, like the default megamenu (take a look at the screenshot).

How could I center this div with css on the screen in any device?

This is the code that I've used (I hope you understand it)

	
		
- 
			[Home](index.html)
			...
		 ...
		
- 
		[SUBMENU ITEM](#)
			
				
- 
					[SUB MEGA MENU](#)
					
						
							
								
								
- 
									[First column, first item](#)
									
										
- ...
										...
									
								...
								
								...
							
						
					
				
			
		
		...
	

Thank you for your support and have a nice day!
Sergio

Thanks for your reply!

Finally, I did it by myself!

I put my solution here for anyone who need it in future.

I've added this class in "custom.css" file:

@media (min-width: 992px) {
	.mega-menu-content.sub-mega-menu {
		position: fixed;
		transform: none;
		display: block;
		transition: opacity .3s ease, margin .25s ease, top .4s ease 0s !important;
		top: 280px;
		left: 30px;
	}

}

I've applied this css class in the mega-menu-content div like so:

...

- 
	[SUB MEGA MENU](#)
		 
			
				
				...

And finally I've needed to move the div when scroll up and down and the header shrink, because my project has a sticky menu.
To do it, I've put this two lines of code in the "stickyMenu" function, in "functions.js" file:

stickyMenu: function( headerOffset ){

	windowScrT	= $window.scrollTop();

	if( $body.hasClass('device-xl') || $body.hasClass('device-lg') ) {
		if( windowScrT > headerOffset ) {
			if( !$body.hasClass('side-header') ) {
				$header.filter(':not(.no-sticky)').addClass('sticky-header');
				// if( !$headerWrap.hasClass('force-not-dark') ) { $headerWrap.removeClass('not-dark'); }
				SEMICOLON.header.stickyMenuClass();
				if( stickyShrink == 'true' && !$header.hasClass('no-sticky') ) {
					if( ( windowScrT - headerOffset ) > Number( stickyShrinkOffset ) ) {
						$header.addClass('sticky-header-shrink');
						if( headerSizeCustom ){
							logo.find('img').css({ 'height': Number( stickyLogoH ) });
							SEMICOLON.header.menuItemsSpacing( stickyMenuP );

				// <--- ADD THIS LINE HERE:
							$('.sub-mega-menu').css({'top': '240px'});

						}
					} else {
						$header.removeClass('sticky-header-shrink');
						if( headerSizeCustom ){
							logo.find('img').css({ 'height': Number( defLogoH ) });
							SEMICOLON.header.menuItemsSpacing( defMenuP );

				// <--- ADD THIS LINE HERE:
							$('.sub-mega-menu').css({'top': '280px'});

						}
					}
				}
			}
		} else {

Maybe I don't use the best practice technique but it's enough for me and I hope this could help someone who need it.

Have a nice day!
Sergio.