flexbox 和 CSS3 width/height 声明的垂直居中问题

Question

我不确定我做错了什么，但我试图将导航元素垂直居中并将其粘贴到屏幕右侧，但是有东西将其向下推，稍微偏离中心。

红色是 flex 容器，绿色是 header，灰色框是右对齐且垂直居中的框我想真正垂直居中而不是 'off-center'。

我不知道是什么让它往下跳。

我创建了一个 JSFIDDLE 这样您就可以看到我正在努力实现的目标。（本质上它是一个位于滚动页面上的固定弹性容器。

<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;
}

Answer 1

你的 header 放错地方了，试试这个

<div class="pageWrap"><!-- Primary content first for SEO purposes. Use CSS to rearrange secondary elements -->


          <header>

                <nav>
                </nav>

        </header>
     <main role="main">

                <section></section>
                <section></section>
                <section></section>
                <section></section>

            </main>

            <footer>
            </footer>

        </div>

        <div class="navWrap"><!-- Place less important HTML after main content (My brain hurts!)-->


            <nav class="pagesNav next">

                <span class="arrow"></span>
                <span class="arrow"></span>

            </nav>

        </div>

css

    html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

html, body {
  height: 100%;
}

body {

}

/* Temp styles */

.pageWrap {

}

main {
    max-width: 1920px;
    height: 100%;
    margin: 0 auto;
}

section {
    height: 100vh;
    width: 100%;
    background: white;
}

section:first-child {
    height: 95vh;
}

section:nth-child(even) {
    background: yellow;
}

footer {
    height: 300px;
    background: red;
}

/* Less important info */
header{
    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;   

}
.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; 
}

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;
}

这里是 fiddle https://jsfiddle.net/L4u9t78m/2/

flexbox 和 CSS3 width/height 声明的垂直居中问题

Vertical centering issue with flexbox and CSS3 width/height declarations

html

css

vertical-alignment

flexbox