使用Bootstrap实现ul垂直居中异常：ul未在父div中垂直居中

问题出在你的父级bg-primary div没有设置高度——默认情况下div的高度由内部内容撑开，和ul的高度一致，所以align-items-center的垂直居中效果无法体现。

解决方案：给父div设置高度 #

给父容器添加高度（可以用Bootstrap内置的高度类，也可以自定义高度），这样align-items-center就能让ul在容器内垂直居中了。

修改后的代码示例：

<div className="d-flex align-items-center bg-primary" style={{ height: "200px" }}>
  <ul
    className="d-flex align-items-center bg-success"
    style={{ gap: "3em" }}
  >
    <li className="bg-danger">vision</li>
    <li>consorzio</li>
    <li>contatti</li>
  </ul>
</div>

额外说明 #

• 如果要让父div占满整个视口高度，可以用Bootstrap的vh-100类替代自定义高度：

  <div className="d-flex align-items-center bg-primary vh-100">
    <!-- 内部ul代码不变 -->
  </div>
  

• 若父div是嵌套在其他容器内，要确保外层容器也有明确的高度设置，否则align-items-center依然无法生效。

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