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)

<nav class="primary-menu">
	<ul class="menu-container">
		<li class="menu-item">
			<a class="menu-link" href="index.html"><div>Home</div></a>
			...
		</li> ...
		<li class="menu-item">
		<a class="menu-link" href="#"><div>SUBMENU ITEM</div></a>
			<ul class="sub-menu-container">
				<li class="menu-item mega-menu">
					<a class="menu-link" href="#"><div>SUB MEGA MENU</div></a>
					<div class="mega-menu-content mega-menu-style-2">
						<div class="container">
							<div class="row">
								<ul class="sub-menu-container mega-menu-column col-lg-4">
								<li class="menu-item">
									<a class="menu-link" href="#"><div>First column, first item</div></a>
									<ul class="sub-menu-container mega-menu-dropdown">
										<li class="menu-item">...</li>
										...
									</ul>
								...
								</li>
								...
							</div>
						</div>
					<div>
				</li>
			</ul>
		</li>
		...
	</ul>
</nav><!-- #primary-menu end -->

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:

...
<li class="menu-item mega-menu">
	<a class="menu-link" href="#"><div>SUB MEGA MENU</div></a>
		<div class="mega-menu-content sub-mega-menu mega-menu-style-2> <!-- ==== HERE === -->
			<div class="container">
				<div class="row">
				...

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.