html - 如何使元素水平和垂直居中

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>

Answer 1

• 方法一 - transform translateX/translateY:

  Example Here/Full Screen Example

  在 supported browsers (大部分)，您可以将 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 方法:

  Example Here/Full Screen Example

  在 supported browsers , 将目标元素的 display 设置为 flex 并使用 align-items: center 进行垂直居中和 justify-content: center 用于水平居中。只是不要忘记添加供应商前缀以获得额外的浏览器支持 (see example)。

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:

  Example Here/Full Screen Example

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

  对于垂直对齐，将父元素的width/height设置为100%并添加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% 距离顶部有位移:

  Example Here/Full Screen Example

  此方法假定文本具有已知高度 - 在本例中为 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 方法(最不灵活 - 不建议):

  Example Here

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

  虽然此解决方案在某些情况下会起作用，但值得注意的是，当存在多行文本时它不起作用 - like this .

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