Flexbox中<nav>元素垂直居中困难的技术咨询

问题描述 #

我需要将导航菜单在绿色区域（.menu-box）中垂直居中，目前仅能实现水平居中，尝试过vertical-align: middle;无效，也试过多种display和flex-flow属性组合但均未成功，请问问题出在哪里？

原代码 #

<!doctype html>
<html>
    <head>
        <style>
            .header-box {
                flex-flow: column wrap;
                display: inline-flex;
                background-color: beige;
                width: 100%;
                height: 100px;
                column-gap: 0px;
            }

            .logo-box {
                background-color: pink;
                height: 100%;
                width: 25%;
                align-content: flex-start;
                min-width: 85px;
            }

            .logo-box p {
                flex-flow: column nowrap;
                font-size: 23px;
            }

            .menu-box {
                background-color: green;
                width: 50%;
                height: 100%;
                text-align: center;
            }

            .menu-box nav {
                font-size: 23px;
                background-color: yellow;
            }

            .dummy-box {
                background-color: red;
                width: 25%;
                height: 100%;
            }
        </style>
    </head>

    <body>
        <span class="header-box">

            <span class="logo-box">
            </span>

            <span class="menu-box">
                <nav>
                    <a href="/html/">Home</a> |
                    <a href="/css/">Menu</a> |
                    <a href="/js/">Gallery</a> |
                    <a href="/python/">About</a>
                </nav>
            </span>

            <span class="dummy-box">
            </span>
        </span>
    </body>
</html>

问题原因 #

1. .menu-box 未设置为flex容器，无法利用flex布局的垂直对齐属性控制内部元素
2. vertical-align: middle 仅对行内元素、行内块元素或表格单元格生效，对块级元素无效，所以之前的尝试不生效

解决方法 #

修改.menu-box的CSS样式，添加flex布局相关属性：

.menu-box {
    background-color: green;
    width: 50%;
    height: 100%;
    display: flex; /* 将容器转为flex布局 */
    justify-content: center; /* 保持水平居中 */
    align-items: center; /* 实现垂直居中 */
}

补充优化（可选） #

原.header-box设置inline-flex同时指定width: 100%，改为display: flex更合理；另外原flex-flow: column wrap会让子元素垂直堆叠，不符合头部横向布局的常规需求，建议修正：

.header-box {
    flex-flow: row nowrap; /* 改为横向排列子元素 */
    display: flex;
    background-color: beige;
    width: 100%;
    height: 100px;
    column-gap: 0px;
}

内容的提问来源于stack exchange，提问作者Karlton