How to center fixed navbar in another div? - html

Question

I am trying to have a fixed and centered navbar div which is within another div that's using a parallax effect. If I set the position to relative, the navbar will be centered within the other div however setting it to fixed will have a fixed navbar but not centered. I would like to avoid using margin left x amount of px because it doesn't seem consistent for cross resolutions. Is there anyway to keep the navbar fixed position but have it centered within the other div without mar?
This is my code:
#page-wrap {
position: relative;
min-width: 1366px;
max-width: 2048px;
margin: 0px auto;
width: 95%;
}
header {
background: url('../images/cover1.jpg') no-repeat;
background-size: 100% 90%;
width: 100%;
height: 1000px;
}
#nav {
background: #f0f;
margin: 0 auto;
height: 500px;
min-width: 980px;
max-width: 2048px;
position: fixed;
opacity: 1;
}
#main {
background: #fff;
position: relative;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="page-wrap">
<header>
<nav id="nav">Nav</nav>
</header>
<div id="main">Lorem ipsum flash.</div>
</div>
<script>
$(document).on('scroll', function(e) {
$('#nav').css('opacity', ($(document).scrollTop() / 500));
var st = $(window).scrollTop();
$('header').css({
'background-position-y': 0 + (st * .77) + "px"
});
});
</script>

Answer 1

You could keep your nav in center of screen, but you need to wrap it inside fixed container, working Fiddle. HTML is slightly different:
<div id="page-wrap">
<header>
<div class="nav_container">
<nav id="nav">Nav</nav>
</div>
</header>
<div id="main">Lorem ipsum flash.</div>
</div>
In CSS fixed element becomes .nav_container and nav must become inline-block - that way we can use text align:
#page-wrap {
position: relative;
min-width: 1366px;
max-width: 2048px;
margin: 0px auto;
width: 95%;
}
header {
background: url('http://placehold.it/500x500') no-repeat;
background-size:100% 90%;
width: 100%;
height: 500px;
}
.nav_container {
margin: 0 auto;
width: 100%;
position: fixed;
opacity: 1;
text-align: center;
}
.nav_container nav {
display: inline-block;
background: #f0f;
min-width: 100px;
max-width: 2048px;
height: 100px;
}
#main {
background: #fff;
position: relative;
height: 500px;
}

Answer 2

How about centering your nav using javascript?
$('#nav').css({'left': (($(document).width() - $('#nav').width())/2 )+"px"});

Answer 3

This should suffice for what you're trying to do. Let me know if this doesn't work.
#nav {
background: #f0f;
margin: 0 auto;
height: 500px;
min-width: 980px;
max-width: 2048px;
position: fixed;
opacity: 1;
left: 50%;
}