知乎上发现一个提问《CSS 有什么奇技淫巧？》，看了一下果然很”奇淫”呀。 虽然有的我已经在使用了，但觉得在此记录总结一番，也很有必要。

Div内容垂直居中

方法一：设置父级元素为 display:table 内容为 display:table-cell；vertical-align:middle； html - div vertical align middle css 方法二：利用一个translateY的属性来搞 IE9及其以上的IE都支持，这个有点荡哦。

1
2
3
4
5

    .element {
      position: relative;
      top: 50%;
      transform: translateY(-50%);
    }

我们可以写个mixin 更方便使用

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

    /* Mixin */
    @mixin vertical-align {
      position: relative;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
    }

    .element p {
      @include vertical-align;
    }

demo在这里 Vertical center with only 3 lines of CSS 更多详情请猛击这个链接 Z63 | Vertical align anything with just 3 lines of CSS

23 Popular Logos Built Purely with CSS3