【UI】CSS垂直居中

[fayeah]

给定一个层级结构，如何实现自元素的垂直居中：

  // html
  <div class="outer">
    <div class="children-elements"></div>
  </div>

  // css
  .outer {
      height: 60px;
      width: 600px;
      background-color: yellow;
  }

• 内部元素是一个div

  1. 方法一

  <div class="outer">
    <div class="inner">vertical</div>
  </div>

  那么我们只需要给 inner 一个与 outer 高度相等的 line-height 就可以实现：

  .inner {
    line-height: 60px;
  }

  当一行的文本小于等于父元素的宽度时，用line-height来实现时没有太大问题的，但是，如果超出这行会发生什么（下图是当我把outer宽度改为60px，inner的文本改长一点时abc1艰苦奋斗的情况）：

  ![inner-image-too-long]({{ "/assets/inner-text-too-long.png" | absolute_url }})

  折行的文本被挤下来了，这个时候我们该怎么办呢？ 首先介绍下line-height是啥，

  line-height CSS 属性用于设置多行元素的空间量，比如文本。该属性值最好用数字，否则可能会产生不确定值。

  具体定义参考MDN。
  也就是说line-height的存在并非是让我们用来垂直居中的，只是偶然巧合我们可以利用它来实现。来讲第二种方式。

  2. 方法二

  使用top: 50%来实现，但是这个时候需要给子元素一个absolute的位置属性值，同时也要给其父元素一个relative的位置属性值，否则该子元素会相对于最近的拥有relative的属性值的元素垂直居中，注意，最后要给子元素一个 translateY 的-50%，因为 top 只是将文本的顶部做top的计算而不是本身；

  .outer {
      height: 60px;
      width: 60px;
      background-color: yellow;
      position: relative;
  }
  .inner {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }

  但这个方法有一个问题，就是如果行数超过了父元素的高度，怎么办，一般是在最后一行ellipsis，网上一般都有实现，这里就不再赘述。

• 内部元素是一个span

  <div class="outer">
    <span class="inner">vertical</span>
  </div>

  跟内部是一个 div 实现垂直居中的方式是一毛一样的，如果多行跟div几乎是一样的效果和实现。

  3. 方法三 W3C给出了一种很简单的方法，是在父元素没有高宽的情况下，给子元素上下padding来撑开，当然针对块级元素，如果是行内元素，需要改变其display属性值为inline-block；

    .inner {
      padding: 20px 0;
    }

  4. 方法四 当然，还有一个比较粗暴的方法是用table，父元素的display为table，子元素的display为table-cell，并且给子元素一个vertical-align: middle;也可以实现：

  .outer {
    height: 60px;
    width: 600px;
    background-color: yellow;
    display: table;
  }
  .inner {
    padding: 20px 0;
  }