Bootstrap添加align-items-center后无法将搜索表单居中到页面怎么办

align-items-center 是Flex布局中控制**交叉轴（垂直方向）**对齐的类，Bootstrap默认的.row是横向排布的flex容器，加这个类只能实现子元素的垂直居中，没法做到水平居中。另外你的外层容器没有设置足够高度，哪怕要垂直居中也不会生效。
你的现有代码里，包裹表单的.col默认会撑满整行宽度，表单本身默认左对齐，自然不会跑到中间位置。

页面效果截图

根据你需要的居中效果选对应方案即可：

场景1：仅需要搜索表单水平居中 #

两种实现方式二选一：

• 给包裹表单的.col添加d-flex justify-content-center类，将列转为flex容器，让内部表单水平居中
• 直接给<form>标签加mx-auto类，通过Bootstrap封装的左右自动外边距实现水平居中
  参考代码：

<div class="container searchcontainer">
    <div class="row">
        <div class="col d-flex justify-content-center">
            <form class="searchform d-flex" role="search">
                <input class="form-control me-2" type="search" placeholder="Search A Word Pattern" aria-label="Search">
                <button class="btn SearchButton" type="submit">Search</button>
            </form> 
        </div>
    </div>
</div>

场景2：需要搜索表单在整个页面视口内垂直+水平双居中 #

需要先让外层容器占满浏览器视口高度，再搭配对应居中类：

1. 给最外层.searchcontainer和内部.row都加min-vh-100类，让容器高度等于视口高度
2. 给.row同时加align-items-center（垂直居中）、justify-content-center（水平居中）类
3. 把.col改为col-auto，让列宽自动适配表单内容，避免撑满整行导致居中失效
   参考代码：

<div class="container searchcontainer min-vh-100">
    <div class="row align-items-center justify-content-center min-vh-100">
        <div class="col-auto">
            <form class="searchform d-flex" role="search">
                <input class="form-control me-2" type="search" placeholder="Search A Word Pattern" aria-label="Search">
                <button class="btn SearchButton" type="submit">Search</button>
            </form> 
        </div>
    </div>
</div>

Bootstrap Flex布局的居中类可以按轴快速区分：

• 主轴（默认横向）居中：justify-content-center
• 交叉轴（默认纵向）居中：align-items-center
• 块级元素水平居中也可以直接用mx-auto类实现

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