如何在Bootstrap 5中实现div元素的水平居中？

我找不到在Bootstrap 5中居中div的直接方法，或许我遗漏了某个显而易见的用法。通过谷歌搜索，我被引导到了flex相关文档。在Bootstrap 4中，我可以通过设置col-sm-*并使用col-sm-offset-*实现该效果。注意：我不需要让div内部的内容居中，仅需要让整个div本身水平居中，设置外边距是唯一的实现方式吗？

Bootstrap 5 提供了多种原生工具类实现div本身水平居中，无需自定义外边距样式，也不会影响div内部的内容对齐规则，以下是3种最常用的适配方案：

• 通用块级元素居中方案：直接给目标div添加mx-auto类即可，该类是Bootstrap封装的水平方向margin: auto实现，是单个固定宽度块级元素居中的最优解。
• 栅格系统居中方案：Bootstrap 5 修改了栅格偏移类的命名规则，原Bootstrap 4的col-sm-offset-*类已替换为offset-*前缀的类，例如需要在小屏及以上尺寸下占6列宽度并居中，写为col-sm-6 offset-sm-3即可，和旧版逻辑一致仅类名有调整。
• 父容器flex布局方案：给目标div的父元素添加d-flex justify-content-center类，父元素下的子div会自动水平居中，适合同层级多个元素统一居中的场景。

上述方案均为Bootstrap 5原生支持的能力，不需要手动编写自定义外边距样式。

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