使用Flask与Bootstrap无法对齐DIV的问题求助

你遇到的问题根源是：text-center类仅对文本或内联元素生效，而input-group是Bootstrap的flex布局容器，直接给它加text-center只会影响内部的文本（比如你的"Options"标签），无法让整个容器水平居中。下面给你几种符合Bootstrap规范的解决方法：

方法1：使用Bootstrap网格系统居中（推荐） #

利用Bootstrap的栅格布局，把input-group放在一个居中的列容器里，这是最贴合Bootstrap设计思路的方式：

<div class="row">
  <div class="col-md-6 mx-auto">
    <label>Options</label>
    <div class="input-group">
      <select class="custom-select">
        <option>请选择选项</option>
        <option>选项1</option>
        <option>选项2</option>
      </select>
      <div class="input-group-append">
        <button class="btn btn-outline-secondary" type="button">确认</button>
      </div>
    </div>
  </div>
</div>

• row创建栅格行，col-md-6设置中等屏幕及以上时，该列占据6个栅格宽度（即父容器的一半）
• mx-auto类让这个列在父容器中水平自动居中，从而带动内部的input-group一起居中

方法2：用Flex工具类直接居中 #

如果不需要栅格布局，可直接给input-group的父容器添加Bootstrap flex工具类：

<div class="d-flex flex-column align-items-center">
  <label>Options</label>
  <div class="input-group" style="width: 60%;">
    <select class="custom-select">
      <option>请选择选项</option>
      <option>选项1</option>
      <option>选项2</option>
    </select>
    <div class="input-group-append">
      <button class="btn btn-outline-secondary" type="button">确认</button>
    </div>
  </div>
</div>

• d-flex将父容器转为flex布局容器
• flex-column让子元素（标签和input-group）垂直排列
• align-items-center让所有子元素水平居中
• 给input-group设置width是为了避免它撑满整个父容器，可根据需求调整百分比

额外注意事项 #

• 确保你的base.html中正确引入了Bootstrap的CSS文件，只有样式加载正常，这些工具类才能生效。
• 不要直接给input-group添加text-center类，因为flex容器的布局逻辑和普通文本容器不同，这个类对它的整体位置不起作用。

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