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

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- 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方法：

在支持的浏览器中，将display目标元素的设置为flex并align-items: center用于垂直居中和justify-content: center水平居中。只是不要忘记为其他浏览器支持添加供应商前缀。

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%。

对于垂直对齐，将父元素的width/设置height为100%并添加display:table。然后对于子元素，将更display改为table-cell并添加vertical-align: middle。

对于水平居中，您可以添加text-align: center以使文本和任何其他inline子元素居中。另外，您可以使用margin: 0auto，假设元素是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在子元素上设置一个值，该值等于父元素的固定高度。

尽管此解决方案在某些情况下可以使用，但值得注意的是，当有多行文本（例如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>