如何使用Bootstrap实现div或input元素的垂直居中

你现有代码仅配置了水平居中规则，缺少垂直对齐的必要布局属性，可直接通过Bootstrap自带工具类实现效果，不需要额外写自定义CSS：

整页视口居中实现（匹配参考截图的搜索框居中效果） #

直接替换原有代码即可，最终实现输入框+按钮在整个页面水平、垂直双居中，且两个控件沿中线对齐：

<body class="bg-light min-vh-100 d-flex align-items-center m-0">
    <div class="container-fluid">
        <div class="row justify-content-center align-items-center gx-2">
            <div class="col-sm-6 col-10">
                <input class="form-control" list='datalistOptions' placeholder="Where would you like to travel?">
            </div>
            <div class="col-auto">
                <button class="btn btn-primary" id="btn">Search</button>
            </div>
        </div>
    </div>
</body>

用到的核心类说明 #

• min-vh-100：给body设置最小高度为浏览器视口高度，为垂直居中提供高度计算基准
• d-flex：将对应元素转为flex弹性布局容器
• align-items-center：加在body上时，实现内部所有子元素在页面垂直方向居中；加在row上时，实现同一行内的输入框、按钮沿垂直中线对齐，不会出现高低错位
• m-0：清除body默认外边距，避免页面出现多余滚动条
• gx-2：给行内两个列添加水平间距，避免输入框和按钮贴在一起
• col-sm-6 col-10：适配移动端，小屏幕下输入框占10份宽度，大屏下占6份宽度，体验更好
• col-auto：替换原代码的col-1，列宽自动适配按钮内容宽度，不会因为列宽太窄挤压按钮样式

固定高度容器内居中实现 #

如果不需要整页居中，仅需要在某个固定高度的区块内实现元素垂直居中，只需要给父容器添加对应flex类即可，示例：

<!-- 高度500px的容器内实现输入框居中 -->
<div class="p-3 d-flex align-items-center justify-content-center" style="height: 500px">
    <input class="form-control w-50" placeholder="请输入内容">
</div>

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