无法使位于另一个div的div中的滑块居中

Question

我正在使用Wordpress建立网站，并且对我的主页有疑问。它分为3个容器div，每个div占据整个屏幕。在我的第2格中，我有一些类似Tab功能的东西。意思是，在div container2 div的底部有4个按钮，根据您单击的四个按钮中的哪个，将加载不同的内容（内容1、2、3或4）。

我希望这四个内容div的结构相同。左侧的一个应该是滑块，它不会占据整个左侧。因此，您仍然可以在滑块周围看到div容器2的背景（我将添加一些填充）。无论如何，我无法使用滑块（水平和垂直）将这个div居中。我特别困惑，因为左侧也有一个标题，并且该标题已经水平居中，但是以某种方式将幻灯片继续向左推。就上下文而言，我自己没有编写滑块，我使用了Smart Slider 3 WP插件，然后只是将短代码复制并粘贴到了容器2 div左侧的div中。有人可以帮助我如何在水平和垂直方向上居中吗？

这是我的代码：

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";
}

Answer 1

Flexbox将为您提供极大的帮助。这是一个基本示例。

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>