Javascript Can'；t将一个div中的滑块置于另一个div的中心

我正在用Wordpress建立一个网站，对我的主页有一个问题。它分为3个容器分区，每个分区占据整个屏幕。在我的第二部分中，我有一个类似于tab函数的功能。也就是说，在div container2 div的底部有4个按钮，根据您单击的四个按钮中的哪一个，将加载不同的内容（内容1、2、3或4）

我希望这4个内容分区的结构相同。左侧的一个应该是滑块，它不会占据整个左侧。因此，您仍然可以在滑块周围看到div container 2的背景（我将添加一些填充）。不知何故，我无法使用滑块（水平和垂直）将此div居中。我特别困惑，因为左侧也有一个标题，这已经是水平居中，但不知何故幻灯片一直被推到左侧。只是为了上下文，我没有自己编写滑块，我使用了Smart slider 3 WP插件，然后简单地将短代码复制并粘贴到容器2 div左侧的一个div中。有人能帮我如何水平和垂直居中吗

这是我的密码：

HTML:

JS:

函数openCity（evt，cityName）{
var i，tabcontent，tablinks；
tabcontent=document.getElementsByClassName（“tabcontent”）；
对于（i=0；i

Flexbox将对您大有帮助。这是一个基本的例子

正文{
保证金：0；
}
.集装箱{
宽度：100%；
高度：100vh；
显示器：flex；
证明内容：中心；
对齐项目：居中；
背景：DarkOrchid；
}
.家长{
高度：50vh；
宽度：80vw；
背景：#fff；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.孩子{
背景：水鸭；
填充：.5rem；
颜色：#fff；
}

这是一个测试

看一看。我怀疑它会解决您的许多问题。

text align:center

将此样式应用到的元素的子元素居中。另外，

text align:center

仅适用于

display:inline

或

display:inline block

（默认情况下，

div

是

display:block；

元素）的子元素。要居中显示为

display:block

的元素，可以使用

marginleft:auto；右边距：自动

。然而，正如@Noleli所建议的，我也建议您查看flexbox，因为它现在得到了广泛的支持，您可以非常轻松地实现这些布局。谢谢您的解释！我查看Flexbox，轻松实现了我所需要的！非常感谢！好的，我对Flexbox一点也不熟悉，但我会用谷歌搜索它。我想我只是不明白为什么标题在我的示例中居中，而不是滑块。我希望有人能解释为什么会这样

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

/* 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;
} 

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