在 Bootstrap 中实现居中：水平和垂直
什么是居中？
居中是指将元素水平或垂直地放置在其容器的正中央。在 Web 设计中，居中元素可以增强视觉吸引力并创建平衡感。
使用 Bootstrap 实现水平居中
水平居中文本：
添加 .text-center 类到文本容器水平居中块元素：
添加 .mx-auto 类到块元素。这将自动为块元素添加 margin: 0 auto; 属性，以实现水平居中。使用 Bootstrap 实现垂直居中
垂直居中行内元素：
添加 .align-self-center 类到行内元素垂直居中块元素：
添加 .d-flex 类到容器，再添加 .align-items-center 类到块元素
或 添加 .vh-100 类到容器，再添加 .align-content-center 类到块元素，并为块元素设置最小高度示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!-- 水平居中文本 -->
<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>
以上就是Bootstrap 居中：快速实现水平和垂直居中的详细内容，更多请关注php中文网其它相关文章！