css - flexbox 容器并不总是居中

Question

我有一个 flexbox 容器 (ul)，它间歇性居中(这是有意的)而不是(在 View 刷新时)。这是错误还是 css 中缺少某些内容？

Live example on the jsFiddle.

HTML:

<div id="lower-half">
        <nav>
            <ul>
                <li>
                    <a href="menu.html">Menu</a>
                </li> 
                <li>
                    <a href="catering.html">Catering</a>
                </li> 
                <li>
                    <a href="gallery.html">Gallery</a>
                </li>
                <li>
                    <a href="about.html">About</a>
                </li>

            </ul>

        </nav>

CSS:

nav ul{
    display: flex;
    height: 100%;
    margin: 0 auto;
    justify-content: center;
    flex-wrap: wrap;
    list-style: none;
    border: 3px solid;
    border-radius: 20px;
    width: 360px;
    background-color: white;
}

nav ul li {
    align-self: center;
    flex-grow: 1;
}

Answer 1

这听起来像是一个奇怪的问题——它与浏览器有关吗？我刚试过pasting your code into a Pen这确实使导航居中。

但是，也许为了解决您的问题，我对您的 CSS 做了一些更改，但没有影响您的设计和定位 - 这也许可以解决您的刷新问题。

Updated Pen

HTML

<nav>
    <ul>
        <li>
            <a href="menu.html">Menu</a>
        </li> 
        <li>
            <a href="catering.html">Catering</a>
        </li> 
        <li>
            <a href="gallery.html">Gallery</a>
        </li>
        <li>
            <a href="about.html">About</a>
        </li>

    </ul>

</nav>

CSS

nav {
    display: flex;
    justify-content: center;
}

nav ul{
    display: flex;
    flex-wrap: wrap;
    width: 360px;

    list-style: none;
    border: 3px solid;
    border-radius: 20px;
    background-color: white;
}

nav ul li {
    flex-grow: 1;
}