Can't center a slider that is in a div in another div

I am building a website with Wordpress and have a question regarding my homepage. It is divided into 3 container divs, each of them taking up the entire screen. In my 2nd div, I have something like a tab-function. Meaning, there are 4 buttons at the bottom of div container2 div and depending on which of the four buttons you click, a different content will load (content 1, 2, 3 or 4).

I want the structure of these 4 content divs to be the same. One the left side should be a slider, which does not take up the entire left side. So you can still see the background of div container 2 around the slider (I will obv add some padding). Somehow I cannot center this div with the slider (horizontally and vertically). I am specifically confused because the left side also has a heading and this is already horizontally centered but somehow the slideshow keep being pushed to the left. And just for context, I did not code the slider myself, I used Smart Slider 3 WP plugin and then simply copied & pasted the shortcode into a div within the left side of container 2 div. Can someone help me how I can center this horizontally and vertically?

Here is my code:

HTML:

<div class="container2">

  <div id="hp_slider_1" class="tabcontent">

    <div class="left">
      <div class="tabheading">
        <h5>Left side heading</h5>
      </div>

      <div class="slidertab">
        <?php echo do_shortcode('[smartslider3 slider=14]');?>
      </div>

    </div>


    <div class="right">
      <div class="tabheading">
        <h5>Right Side Heading</h5>
      </div>

      <div class="texttab">
        <h5 class="rightheading">Content1</h5>
        <p class="righttext">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>

    </div>

  </div>

  <div id="hp_slider_2" class="tabcontent">
    <p>Content 2.</p>
  </div>

  <div id="hp_slider_3" class="tabcontent">

    <p>Content3.</p>
  </div>

  <div id="hp_slider_4" class="tabcontent">

    <p>Content 4.</p>
  </div>


  <div class="tab">
    <button class="tablinks" onclick="openCity(event, 'hp_slider_1')">Button1 </button>

    <button class="tablinks" onclick="openCity(event, 'hp_slider_2')">Button2</button>

    <button class="tablinks" onclick="openCity(event, 'hp_slider_3')">Button3</button>

    <button class="tablinks" onclick="openCity(event,'hp_slider_4')">Button4</button>
  </div>

</div>

CSS:

/* Container2 Styling */

.container2 {
  overflow:hidden;
  height: 100vh;
  width: 100%;
  margin: 0;
  background-color: #81A1AA;
  color: white;
  position: relative;
}

/* Style the tab content */
.tabcontent {
  text-align: center;
}

.left {
float: left;
width: 50%;
height: 100vh;
text-align: center;
}

.slidertab {
width: 100%;
}

.right {
float: right;
width: 50%;
height: 100vh;
}

.rightheading {

}

.righttext {

}

/* Style the tab */
.tab {
  overflow: hidden;
  text-align: center;
  width: 100%;
  position: absolute;
  bottom: 0;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 15px 50px;
  transition: 0.3s;
  font-size: 16px;
  color: white;
  font-family: 'Raleway', sans-serif;
}

/* Change background color of buttons on hover */
.tab button:hover {
  color: #4A6971;
}

/* Create an active/current tablink class */
.tab button.active {
  color: #4A6971;
}

JS:

function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

Solution

Flexbox will help you greatly. Here is a basic example.

body {
  margin: 0;
}
.container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: DarkOrchid;
}

.parent {
  height: 50vh;
  width: 80vw;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.child {
  background: teal;
  padding: .5rem;
  color: #fff;
}

<div class="container">
  <div class="parent">
    <div class="child">
    <p>this is a test</p>
    </div>
  </div>
</div>