如何在 Bootstrap 中垂直对齐 DIV
答案:使用align-items-center类
在 Bootstrap 4 中，如果您想将 <div> 元素垂直对齐在中心或中间，您可以简单地将类 align-items-center 应用于包含元素。
以下示例将向您展示如何垂直对齐行内的网格列。
示例
<div class="container">
<div class="row align-items-center">
<div class="col-md-12">Vertical Center Aligned Grid Column</div>
</div>
</div>类似地，您可以使用类 d-flex 结合类 align-items-center 将 DIV 元素垂直对齐在包含元素的中间，如下所示 :
示例
<div class="d-flex align-items-center">
<div class="box">Vertical Center Align a Div</div>
</div>但是，如果您使用的是 Bootstrap 3 版本，您仍然可以使用一些自定义 CSS 来实现。让我们试试下面的例子来了解它的基本工作原理:
示例
/* CSS code */
.vcenter-item{
display: flex;
align-items: center;
}
<!-- HTML code -->
<div class="wrapper vcenter-item">
<div class="box">Vertically Centered Div</div>
</div>FAQ 相关问题解答
以下是与此主题相关的更多常见问题解答:
