Question

我正在使用Jquery UI标签（https://jqueryui.com/tabs/#vertical）。我希望整个容器位于页面的中心。我不是指打开的标签或可点击的标签文本的内容。我的意思是最里面的容器，里面有一切。

Google上有许多示例可以对齐标签或内容，但我无法找到有关如何对齐主div的任何内容。

到目前为止，这是我尝试过的：

div.otabs {
align-content:center;
width:300px;
height:300px;
border:1px solid #555;
position:absolute;
align-items:center;
justify-content:center;
top:10px;
left:10px;

 }

我在实际的标签div上尝试了这个代码，并在标签div之外添加了我自己的div，但标签容器保持左对齐。有谁能提出建议？

<div id="otabs" class="otabs">
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><asp:LinkButton runat="server" href="#tabs-2">Proin dolor        </asp:LinkButton></li>
</ul>
<div id="tabs-1">
<h2>Content heading 1</h2>
<p>Proin elit arcutempus, commodo a, risus. Curabitur nec arcu. Donec tempus lectus.</p>
</div>
<div id="tabs-2">
<h2>Content heading 2</h2>
<p>Morbi tincidunt, dui sit amet facilisis . Suspendisse sed ligula in ligula suscipit aliquam. Praesent in .</p>
</div>
</div>
</div>

Answer 1

因为，您已经在容器上使用position:absolute了。您只需要这三行代码就可以将容器垂直和水平放置 :(这使您无需改变显示或任何其他CSS属性，如果不需要）

transform:translate(-50%,-50%); 
  left:50%;
  top:50%;

body{

}
div.otabs {
  align-content: center;
  width: 300px;
  height: 300px;
  border: 1px solid #555;
  position: absolute;
  align-items: center;
  justify-content: center;
  transform:translate(-50%,-50%);
  left:50%;
  top:50%;
  
}

<div id="otabs" class="otabs">
  <div id="tabs">
    <ul>
      <li><a href="#tabs-1">Nunc tincidunt</a></li>
      <li>
        <asp:LinkButton runat="server" href="#tabs-2">Proin dolor </asp:LinkButton>
      </li>
    </ul>
    <div id="tabs-1">
      <h2>Content heading 1</h2>
      <p>Proin elit arcutempus, commodo a, risus. Curabitur nec arcu. Donec tempus lectus.</p>
    </div>
    <div id="tabs-2">
      <h2>Content heading 2</h2>
      <p>Morbi tincidunt, dui sit amet facilisis . Suspendisse sed ligula in ligula suscipit aliquam. Praesent in .</p>
    </div>
  </div>
</div>

Answer 2

删除position:absolute，然后添加display: block;和margin: auto CSS Margin auto会让浏览器计算它（所有边距都相同）。

div.otabs {
    display: block;
    margin: auto;
    align-content:center;
    width:300px;
    height:300px;
    border:1px solid #555;
    align-items:center;
    justify-content:center;
    top:10px;
    left:10px;
}

Jquery UI选项卡 - 将整个Div /容器居中

2 个答案: