center tumult hype container vertically

Question

I find myself in a bind, again, and require a helping hand.

Created a tumult hype animation that I have inserted in a bootstrap 4 tab, but can't get it to center vertically.

could someone please help me out? Thanks.

<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>

You need to post this: [mcve] – WebDevBooster Feb 26 '18 at 09:23 — WebDevBooster, Feb 26 '18 at 09:23

score -1 · Accepted Answer · answered Feb 26 '18 at 05:40

You can do this using flex box

give your parent component these properties

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

this should center your content inside the parent container vertically and horizontally, if you want to learn more about flexbox you can go here https://css-tricks.com/snippets/css/a-guide-to-flexbox/

center tumult hype container vertically

1 Answers1