小编S.B*_*.B.的帖子

尝试在 bootstrap 4 卡体中垂直和水平对齐一个微调器。

我已经尝试过 my-auto 和 justify-content-center & align-items-center，但我遗漏了一些东西。

我已经检查过显示类型，我相信我的绝对显示是正确的

我还检查了我的位置，我相信我正确使用了 flex。

我的目标是在任何卡片上垂直和水平地加载身体上的微调器。

我在看什么？

代码笔：https ://codepen.io/sterling415/pen/xBErWV

HTML：

<div class="card">
  <h5 class="card-header">Featured</h5>
  <div class="card-body justify-content-center align-items-center">
                <div id="overlay" onclick="off()">
                <div id="justify-content-center align-items-center">
                    <div class="spinner"></div>
                </div>
            </div>
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
     <button type="button" class="btn btn-primary" onclick="on()">Turn on overlay effect</button>
  </div>
</div>      

    </div>
</div>

CSS：

.spinner {
  height: 60px;
  width: 60px;
  margin: auto;
  display: flex;
  position: absolute;
  -webkit-animation: rotation …

我希望创建一个抽屉，类似于抽屉导航器，但没有路线/导航要求。

我计划在那里放置一些其他组件来更新查询。有什么建议吗？具体来说，抽屉将用于显示选项列表、滑块和日期范围组件，这些组件将更新状态和变量，用于更新在主页显示的地图上呈现的标记。