在 Bootstrap 4 中，某些元素的垂直对齐可能具有挑战性。尝试将一行中的内容垂直居中时会出现一个常见的困难，特别是包含文本“Supplier”的元素。
Bootstrap 4 引入了多种垂直对齐方法，包括 Flexbox 实用程序、自动边距和显示实用程序。
Bootstrap 4 Alpha 5 及更早版本：
<div class="row">
<div class="col-xs-6">
<div class="circle-medium backgrounds"></div>
</div>
<div class="col-xs-6 flex-xs-middle">
<div class="name">Supplier</div>
</div>
</div>Bootstrap 4 稳定版：
<div class="row">
<div class="col-sm-12 align-self-center">
<div class="card card-block">
Supplier
</div>
</div>
</div>Bootstrap 4 Flexbox 作者：默认值：
<div class="row">
<div class="col-sm-12 d-flex align-items-center justify-content-center">
<div class="card card-block">
Supplier
</div>
</div>
</div><div class="row h-100">
<div class="col-sm-12 my-auto">
<div class="card card-block">
Supplier
</div>
</div>
</div><div class="row h-50">
<div class="col-sm-12 h-100 d-table">
<div class="card card-block d-table-cell align-middle">
Supplier
</div>
</div>
</div>这些方法提供了各种Bootstrap 4 中垂直对齐元素的选项。请记住选择最适合您的特定要求的方法以及浏览器兼容性考虑因素。
以上是如何在 Bootstrap 4 中垂直居中内容？的详细内容。更多信息请关注PHP中文网其他相关文章！
