在 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类:... - 使用
mx-auto类(Bootstrap 5):...
Bootstrap 4:
- 使用
d-flex和align-items-center类:...
Bootstrap 5:
- 使用
d-grid和align-content-center类:...
使用垂直居中的其他方法
- 使用
margin: auto;样式:... - 使用
position: absolute;和top: 50%; left: 50%;样式:...
示例:
水平居中:
标题
垂直居中:
Bootstrap 4:
标题
Bootstrap 5:










