【揭秘Bootstrap 4】轻松实现Div元素垂直居中的5个绝招

在网页计划中，Div元素的垂直居中是一个罕见的须要。Bootstrap 4 供给了一系列的东西类跟组件，使得开辟者可能轻松地实现这一规划后果。以下是五种在 Bootstrap 4 中实现 Div 元素垂直居中的绝招：

绝招一：利用Bootstrap的Flexbox类

Bootstrap 4 利用 Flexbox 规划供给了便捷的居中类。以下是怎样利用这些类来实现垂直居中：

<div class="d-flex justify-content-center align-items-center h-100">
  <!-- 你的内容 -->
</div>

这里的 .d-flex 是 Flexbox 的开启类，.justify-content-center 跟 .align-items-center 分辨实现程度居中跟垂直居中。h-100 确保容器的高度占满其父元素的高度。

绝招二：利用Grid体系

Bootstrap 4 的 Grid 体系同样可能用来实现 Div 的垂直居中。经由过程结合 Grid 类跟居中类，可能轻松实现这一后果：

<div class="container-fluid">
  <div class="row h-100">
    <div class="col-12 d-flex justify-content-center align-items-center">
      <!-- 你的内容 -->
    </div>
  </div>
</div>

在这里，.container-fluid 使得容器宽度占满全部视口宽度，.row 是一个网格行，.col-12 是一个盘踞12列宽度的列。结合居中类，我们可能实现垂直居中。

绝招三：绝对定位

假如 Div 的宽度或高度已知，可能利用绝对定位来实现垂直居中：

<div class="position-absolute" style="top: 50%; left: 50%; transform: translate(-50%, -50%);">
  <!-- 你的内容 -->
</div>

这里利用了 .position-absolute 类来实现绝对定位，top 跟 left 属性设置为 50%，transform: translate(-50%, -50%) 用于偏移 Div，实现居中。

绝招四：CSS Grid定位

与 Grid 体系类似，可能利用 Grid 定位来实现 Div 的垂直居中：

<div class="grid-container">
  <div class="grid-item">
    <!-- 你的内容 -->
  </div>
</div>

这里的 .grid-container 应当利用 display: grid; 来设置 Grid 规划，而 .grid-item 利用 .align-self-center 类来垂直居中。

绝招五：利用Bootstrap的模态框或弹窗

Bootstrap 供给的模态框跟弹窗组件本身就是居中的，因此可能直接利用它们来包含你的内容：

<!-- 模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <!-- 你的内容 -->
      </div>
    </div>
  </div>
</div>

<!-- 初始化模态框 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  打开模态框
</button>

经由过程上述方法，开辟者可能在 Bootstrap 4 中轻松实现 Div 元素的垂直居中，晋升网页计划的美不雅性跟用户休会。