Question

我再次发现自己陷入困境，需要伸出援助之手。

创建了一个我已经插入bootstrap 4选项卡中的动画炒作动画，但无法将其垂直居中。

有人可以帮帮我吗？感谢。

<main role="main" class="container">
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">
      <h4>test1</h4>
      tab1
    </div>
    <div class="tab-pane" id="tab2">
        <br>
        <br>
        <!-- copy these lines to your document: -->

        <div id="press_hype_container" style="margin:auto;position:relative;width:600px;height:400px;overflow:hidden;">
            <script type="text/javascript" charset="utf-8" src="press.hyperesources/press_hype_generated_script.js?41934"></script>
        </div>

        <!-- end copy -->

    </div>
    <div class="tab-pane" id="tab3">
      <h4>test3</h4>
      tab3
    </div>
      <div class="tab-pane" id="tab4">
      <h4>test4</h4>
    </div>
  </div>
</main>

Answer 1

您可以使用弹性框

执行此操作

为您的父组件提供这些属性

.parent{
   display: flex;
   align-items: center;
   justify-content: center;
}

这应该将您的内容纵向和横向放在父容器中，如果您想了解有关Flexbox的更多信息，可以访问https://css-tricks.com/snippets/css/a-guide-to-flexbox/

中心骚动炒作容器垂直

1 个答案: