Struggling to vertically center a nav element and align it to the right of the screen? There seems to be something causing it to shift slightly off-center.
In this setup, the red represents the flex container, the green is the header, and the grey box is the right-aligned, vertically centered box that should truly be centered.
The issue of it jumping down is puzzling me.
For a clearer visual representation, check out this JSFIDDLE. Essentially, it's about having a fixed flex container overlaying a scrolling page.
<div class="navWrap"><!-- Place less important HTML after main content (My brain hurts!)-->
<header>
<nav>
</nav>
</header>
<nav class="pagesNav next">
<span class="arrow"></span>
<span class="arrow"></span>
</nav>
</div>
CSS:
.navWrap {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
position: fixed;
top: 0;
width: 100%;
height: 100vh;
background: red;
}
header {
-webkit-align-self: flex-start;
-ms-flex-item-align: start;
align-self: flex-start;
width: 100%;
height: 70px;
background: green;
}
nav:not(.pagesNav) {
}
.pagesNav {
margin-left: auto;
width: 80px;
height: 155px;
background: #414141;
}