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

• 方法 1 - 转换 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 )。请记住，父容器也需要高度(在本例中为 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:

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>