带导航栏时如何实现Bootstrap登录表单的垂直与水平居中？

我明白你的问题啦！Bootstrap这个登录模板把body设置成了flex容器来让表单垂直水平居中，结果你添加的导航栏也被这个布局拉到页面中间去了，别担心，咱们调整一下布局就能解决，给你两种简单的方案：

方案一：直接调整导航栏的对齐方式 #

这种方式改动最小，只需要给导航栏加个自定义样式：

1. 给你的导航栏标签添加一个自定义类，比如navbar-top：

<nav class="navbar navbar-expand-md navbar-dark navbar-top" style="background-color:#fe5f55;">
  <!-- 导航栏原有内容 -->
</nav>

2. 在你的CSS里添加以下样式：

.navbar-top {
  align-self: flex-start; /* 让导航栏在flex容器里靠顶部对齐 */
  width: 100%; /* 保证导航栏占满页面宽度，避免被挤窄 */
}

原理：原模板的body是flex容器，默认的align-items:center会让所有子元素垂直居中，align-self:flex-start可以单独给导航栏设置对齐方式，让它脱离整体的居中规则。

方案二：重构布局（更推荐，结构更清晰） #

把登录表单单独放在一个容器里，让这个容器负责居中，body不再直接做flex容器：

1. 给登录表单包裹一个新的div容器：

<!-- 导航栏放在最前面 -->
<nav class="navbar navbar-expand-md navbar-dark" style="background-color:#fe5f55;">
  <!-- 导航栏原有内容 -->
</nav>

<!-- 新增的表单容器 -->
<div class="login-wrapper">
  <form class="form-signin" method="post">
    <!-- 你的表单原有内容 -->
  </form>
</div>

2. 修改body和新增容器的CSS样式：

/* 修改原body的样式，去掉flex相关属性 */
body{
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #f5f5f5;
  /* 移除以下几行原有的flex设置：
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  text-align:center;
  */
}

/* 给新增的容器设置居中样式 */
.login-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 80px); /* 减去body上下padding的总高度，保证表单垂直居中 */
  text-align: center;
}

这样导航栏会正常显示在页面顶部，而表单在剩余的页面空间里保持垂直水平居中，结构更清晰，后续添加其他元素也不容易出现布局冲突。

你可以根据自己的需求选择其中一种方案，调整后应该就能解决导航栏被居中的问题啦！

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