如何实现导航栏内列表元素的垂直居中对齐？

实现方案 #

你现有代码的核心问题是align-items属于Flex布局专属属性，没有给父元素开启Flex布局的前提下该属性不会生效，按以下步骤修改即可实现列表在侧边导航栏内垂直对齐：

完整修改后的CSS代码

.navbar {
    position: fixed;
    height: 100%;
    width: 240px;
    top: 0;
    left: 0;
    background: aqua;
    padding: 6px 14px;
    text-align: center;
    align-items: center;
    /* 新增以下2行：开启flex布局，设置子元素纵向排列 */
    display: flex;
    flex-direction: column;
    /* 新增：避免padding撑宽撑高容器 */
    box-sizing: border-box;
}

.navbar ul {
    margin-top: 20px;
    height: 100%;
    border: 5px solid #000000;
    /* 新增：上下margin设为auto实现纵向居中 */
    margin: auto 0;
    /* 新增：重置ul默认左内边距，避免列表项偏移 */
    padding: 0;
    box-sizing: border-box;
    /* 如果需要li在ul内部也垂直居中，可额外取消下面2行的注释 */
    /* display: flex;
    flex-direction: column;
    justify-content: center; */
}

.navbar ul li{
    position: relative;
    margin: 8px 5px; /* 可按需调整上下间距数值 */
    height: 50px;
    width: 100%;
    line-height: 50px;
    list-style: none;
}

关键改动说明

• 给.navbar开启Flex布局、设置子元素纵向排列，原本已经写好的align-items: center会自动生效，实现子元素水平居中
• 新增box-sizing: border-box属性，避免padding把容器撑得超出设定的宽高，出现多余滚动条
• 给.navbar ul设置纵向auto margin，在Flex父容器内该属性会自动占满上下剩余空间，实现整个列表的垂直居中
• 重置ul的默认左内边距，避免列表项出现异常的向右偏移

如果需要ul占满整个导航栏高度，同时li在ul内部垂直对齐，保留ul的height: 100%属性，再给ul开启Flex布局、设置justify-content: center即可。

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