bootstrap 中实现居中的方法如下：水平居中：文本：添加 .text-center 类块元素：添加 .mx-auto 类垂直居中：行内元素：添加 .align-self-center 类块元素：使用 d-flex 和 .align-items-center 类使用 vh-100 和 .align-content-center 类
在 Bootstrap 中实现居中：水平和垂直
什么是居中？
居中是指将元素水平或垂直地放置在其容器的正中央。在 Web 设计中，居中元素可以增强视觉吸引力并创建平衡感。
使用 Bootstrap 实现水平居中
水平居中文本：
hstshop鸿思特商城系统
下载
鸿思特商城系统HstShop是一款B2C独立网店系统，由拥有十年互联网开发经验的牛头带队开发完成，完全免费开源，适合大中型网站平台快速构建立强大的网上商城平台网店系统。HstShop悉心听取每一位商家的需求与建议，根据中国人的购物习惯改进了购物流程，实现更好的用户购物体验。HstShop网店系统无论在产品功能、稳定性、执行效率、负载能力、安全性和搜索引擎优化等方面都居国内同类产品领先地位，成为国内
- 添加
.text-center类到文本容器
水平居中块元素：
- 添加
.mx-auto类到块元素。这将自动为块元素添加margin: 0 auto;属性，以实现水平居中。
使用 Bootstrap 实现垂直居中
垂直居中行内元素：
- 添加
.align-self-center类到行内元素
垂直居中块元素：
- 添加
.d-flex类到容器，再添加.align-items-center类到块元素
或 - 添加
.vh-100类到容器，再添加.align-content-center类到块元素，并为块元素设置最小高度
示例：
<code class="html"><!-- 水平居中文本 --> <p class="text-center">居中的文本</p> <!-- 水平居中块元素 --> <div class="mx-auto" style="width: 200px; height: 100px;">居中的块元素</div> <!-- 垂直居中行内元素 --> <div class="d-flex justify-content-center"> <span class="align-self-center">居中的行内元素</span> </div> <!-- 垂直居中块元素（使用 d-flex） --> <div class="d-flex flex-column vh-100 align-items-center"> <div style="width: 200px; height: 100px;">居中的块元素</div> </div> <!-- 垂直居中块元素（使用 vh-100） --> <div class="vh-100"> <div class="align-content-center" style="height: 100px;">居中的块元素</div> </div></code>
