如何水平和垂直居中元素

Question

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

如何为每个选项卡同时对齐文本 x 和 y？

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

原文由 shuji 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

• ### 方法 1 - transform translateX / translateY ：

此处示例/ 全屏示例

在 支持的浏览器（大多数浏览器）中，您可以使用 top: 50% / left: 50% 结合 translateX(-50%) translateY(-50%) 来动态对齐元素/水平线。

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

---

• ### 方法 2 - Flexbox 方法：

此处示例/ 全屏示例

In supported browsers , set the display of the targeted element to flex and use align-items: center for vertical centering and justify-content: center for horizontal centering.只是不要忘记添加供应商前缀以获得额外的浏览器支持（ 参见示例）。请记住，父容器也需要高度（在本例中为 100%）。

 html, body, .container {
    height: 100%;
}

.container {
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    justify-content: center;
}

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

---

• ### 方法 3 - table-cell / vertical-align: middle ：

此处示例/ 全屏示例

在某些情况下，您需要确保 html / body 元素的高度设置为 100% 。

For vertical alignment, set the parent element’s width / height to 100% and add display: table .然后对于子元素，将 display 更改为 table-cell 并添加 vertical-align: middle 。

对于水平居中，您可以添加 text-align: center 以居中文本和任何其他 inline 子元素。或者，您可以使用 margin: 0 auto ，假设元素是 block 级别。

 html, body {
    height: 100%;
}
.parent {
    width: 100%;
    height: 100%;
    display: table;
    text-align: center;
}
.parent > .child {
    display: table-cell;
    vertical-align: middle;
}

 <section class="parent">
    <div class="child">I'm vertically/horizontally centered!</div>
</section>

---

• ### 方法 4 - 绝对定位 50% 从顶部位移：

此处示例/ 全屏示例

此方法假定文本具有已知高度 - 在本例中为 18px 。绝对定位元素 50% 从顶部开始，相对于父元素。使用负值 margin-top 元素已知高度的一半，在本例中为 - -9px 。

 html, body, .container {
    height: 100%;
}

.container {
    position: relative;
    text-align: center;
}

.container > p {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin-top: -9px;
}

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

---

• ### 方法 5 - line-height 方法（最不灵活 - 不建议）：

这里的例子

在某些情况下，父元素将具有固定高度。对于垂直居中，您所要做的就是在子元素上设置一个 line-height 值等于父元素的固定高度。

尽管此解决方案在某些情况下会起作用，但值得注意的是，当有多行文本时它不会起作用 - 就像这样。

 .parent {
    height: 200px;
    width: 400px;
    background: lightgray;
    text-align: center;
}

.parent > .child {
    line-height: 200px;
}

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

原文由 Josh Crozier 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果 CSS3 是一个选项（或者你有后备），你可以使用转换：

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

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

原文由 Mr Bullets 发布，翻译遵循 CC BY-SA 3.0 许可协议