为何输入框固定在页面左上角？已试Bootstrap居中类无效

你的问题核心在于两点：

• 容器未启用Flexbox布局（缺少d-flex类），align-items-center、justify-content-center这类Flex相关属性仅在Flex容器中生效。
• 容器没有足够高度支撑垂直居中，导致垂直方向的居中设置无法体现。

修改后的完整代码 #

HTML部分

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>

<div class="container-fluid d-flex flex-column justify-content-center align-items-center min-vh-100">
  <div class="input-group signin email w-100 max-w-md">
    <div class="input-group-text" id="btnGroupAddon">Email</div>
    <input type="text" placeholder="Enter your email" aria-label="Enter your email" aria-describedby="btnGroupAddon" class="flex-grow-1">
  </div>
  <div class="input-group signin password w-100 max-w-md">
    <div class="input-group-text" id="btnGroupAddon">Password</div>
    <input type="password" placeholder="Enter your password" aria-label="Enter your password" aria-describedby="btnGroupAddon" class="flex-grow-1">
  </div>
</div>

CSS部分

.signin {
  margin-top: 5px;
  margin-bottom: 5px;
}

.signin input {
  border: solid 1px gray;
}

.input-group-text {
  width: 90px;
}

关键调整说明 #

1. 给container-fluid添加d-flex：启用Flexbox布局，让对齐类生效。
2. 添加min-vh-100：让容器高度至少占满整个视口，保障垂直居中效果可见。
3. 添加align-items-center：确保内容在水平方向也居中。
4. 输入组添加w-100 max-w-md：小屏幕占满宽度，大屏幕限制最大宽度，避免输入框过宽。
5. 输入框添加flex-grow-1：让输入框自动填充剩余空间，适配左侧文本框的宽度。

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