css3 - CSS关于垂直居中，大家有没有什么比较好的建议。

Question

题主目前在工作中经常遇到这种问题。
例如：在高度固定的时候如果文本是一行的话，垂直居中，如果两行的话也是垂直居中，当第三行的时候就隐藏（如果有‘...’的话当然最好）。有没有简单而有效的方法？
谢谢，么么哒。

Answer 1

css3有个技巧：
{ position: relative; top: 50%; transform: translateY(-50%);}

Answer 2

flex 固然好，但是说起 IE 满脸泪

说一个我一直在用的 inline-block 方法

<p class="vMiddle"><i></i><span>一行两行三行四行高度不确定</span></p>

.vMiddle {
    &, i { height: 150px;} // i 和父层高度一样
    i, span { display: inline-block; vertical-align: middle;}
    i { width: 0;}
}

Answer 3

我建议看看这个css-tricks的这个post

https://css-tricks.com/centering-css-complete-guide/#center-vertically