如何将元素水平和垂直居中

Question

我正在尝试垂直居中我的选项卡内容，但是当我添加CSS样式display:inline-flex时，水平文本对齐消失了。

我如何使文本对齐x和y为我的每个选项卡？

null

* { box-sizing: border-box; }
#leftFrame {
  background-color: green;
  position: absolute;
  left: 0;
  right: 60%;
  top: 0;
  bottom: 0;
}
#leftFrame #tabs {
  background-color: red;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 25%;
}
#leftFrame #tabs div {
  border: 2px solid black;
  position: static;
  float: left;
  width: 50%;
  height: 100%;
  text-align: center;
  display: inline-flex;
  align-items: center;
}

<div id=leftFrame>
  <div id=tabs>
    <div>first</div>
    <div>second</div>
  </div>
</div>

null

Answer 1

如果CSS3是一个选项（或者您有一个备用选项），则可以使用transform：

.center {
    right: 50%;
    bottom: 50%;
    transform: translate(50%,50%);
    position: absolute;
}

与上面的第一种方法不同，您不希望使用left:50%和负翻译，因为IE9+中存在溢出错误。使用正右值，您将不会看到水平滚动条。

Answer 2

>

方法1-transformtranslatex/translatey:

此处示例/全屏示例

在受支持的浏览器（大多数）中，您可以使用top:50%/left:50%与translateX(-50%)translateY(-50%)结合使用，动态地将元素垂直/水平居中。

null

.container {
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

<div class="container">
    <span>I'm vertically/horizontally centered!</span>
</div>