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

Question

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

Answer 1

There is a trick in css3:
{ position: relative; top: 50%; transform: translateY(-50%);}

Answer 2

flex is good, but talking about IE makes me burst into tears

Tell me about an inline-block method that I have been using

<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

I recommend taking a look at this post on css-tricks

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