在 Bootstrap 4/5 中，水平居中元素可以使用 text-center 类或 mx-auto 类，垂直居中元素在 Bootstrap 4 中可以使用 d-flex 和 align-items-center 类或使用 margin: auto; 样式，而在 Bootstrap 5 中可以使用 d-grid 和 align-content-center 类或使用 position: absolute; 和 top: 50%; left: 50%; 样式。
使用 Bootstrap 4/5 实现元素居中
在 Bootstrap 4/5 中，使用以下方法可以将元素居中：
水平居中
- 使用
text-center类：<div class="text-center">...</div> - 使用
mx-auto类（Bootstrap 5）：<div class="mx-auto">...</div>
垂直居中
Bootstrap 4：
- 使用
d-flex和align-items-center类：<div class="d-flex align-items-center">...</div>
Bootstrap 5：
- 使用
d-grid和align-content-center类：<div class="d-grid align-content-center">...</div>
使用垂直居中的其他方法
- 使用
margin: auto;样式：<div style="margin: auto;">...</div> - 使用
position: absolute;和top: 50%; left: 50%;样式：<div style="position: absolute; top: 50%; left: 50%;">...</div>
示例：
水平居中：
<code class="html"><div class="text-center"> <h1>标题</h1> </div></code>
<code class="html"><div class="mx-auto"> <button class="btn btn-primary">按钮</button> </div></code>
垂直居中：
Bootstrap 4：
<code class="html"><div class="d-flex align-items-center"> <h1>标题</h1> </div></code>
Bootstrap 5：
<code class="html"><div class="d-grid align-content-center"> <button class="btn btn-primary">按钮</button> </div></code>
