在Bootstrap4中，实现div的居中布局变得非常简单和高效。Bootstrap4内置了一系列的响应式工具类，这些工具类可以帮助开发者快速实现元素的居中显示。以下是一些常用的Bootstrap4技巧，用于实现div的完美居中布局。

1. 使用Flexbox布局

Flexbox是Bootstrap4中实现居中布局的主要工具之一。通过使用Flexbox，可以轻松地实现水平和垂直居中。

1.1 水平居中

要实现div的水平居中，可以为父容器添加d-flex类，并设置justify-content属性为center。

<div class="container d-flex justify-content-center">
  <div class="box">内容</div>
</div>

1.2 垂直居中

要实现div的垂直居中，可以为父容器添加d-flex类，并设置align-items属性为center。

<div class="container d-flex justify-content-center align-items-center">
  <div class="box">内容</div>
</div>

2. 使用Grid布局

Bootstrap4也提供了Grid布局，这使得实现复杂的居中布局更加容易。

2.1 水平居中

要实现div的水平居中，可以为父容器添加d-grid类，并设置justify-content属性为center。

<div class="container d-grid justify-content-center">
  <div class="box">内容</div>
</div>

2.2 垂直居中

要实现div的垂直居中，可以为父容器添加d-grid类，并设置align-items属性为center。

<div class="container d-grid justify-content-center align-items-center">
  <div class="box">内容</div>
</div>

3. 使用Bootstrap工具类

Bootstrap4还提供了一些工具类，可以直接应用于元素来实现居中。

3.1 水平居中

要实现div的水平居中，可以为元素添加mx-auto类。

<div class="mx-auto">内容</div>

3.2 垂直居中

要实现div的垂直居中，可以为元素添加my-auto类。

<div class="my-auto">内容</div>

4. 结合使用定位和变换

在某些情况下，可能需要结合使用定位和变换来实现更复杂的居中效果。

4.1 水平居中

<div class="position-relative">
  <div class="position-absolute start-50 translate-end-50">内容</div>
</div>

4.2 垂直居中

<div class="position-relative">
  <div class="position-absolute top-50 start-50 translate-y-n50 translate-x-n50">内容</div>
</div>

通过以上方法，可以轻松地在Bootstrap4中实现div的完美居中布局。这些技巧不仅适用于简单的居中布局，也可以用于复杂的响应式布局。