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

Question

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

Answer 1

I searched Baidu for a long time and found a lot of information
This blog is very detailed
http://www.cnblogs.com/dojo-lzz/p/4419596.html
Among them I talked about 7 methods. Flex is a little simple. You can refer to Ruan Yifeng’s blog
for flex. 1. Grammar: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html ;
2. Examples: http://www.ruanyifeng.com/blog/2015/07/flex-examples.html;

---

2016.01.31
Seeing that many friends are paying attention to this issue, I wrote a summary:
SF column article: http://segmentfault.com/a/1190000004394432?_ea=593187;

Answer 2

A commonplace topic centering in CSS

Answer 3

Use js to calculate and write the top value

Answer 4

This is easier to solve using flex layout. I recommend reading teacher Ruan Yifeng’s blog, which explains it in detail http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

Answer 5

http://zhuxinyong.com/2015/03/02/%E6%B0%B8%E6%81%92%E7%9A%84%E6%B0%B4%E5%B9%B3%E5% 9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD/

I wrote it myself, please refer to it!

Answer 6

Use flex

Answer 7

There are just a few ways to vertically center CSS.
For fear of trouble, I just use js to center it.
But the best is flex, followed by using talbe to center, and then position+transform. All three should be of variable height.

Answer 8

https://www.qianduan.net/css-to-achieve-the-vertical-center-of-the-five-kinds-of-methods/

Answer 9

Inline-block and absolute centering are the two most commonly used methods

Answer 10

It is recommended to use flex, the new layout trend
It is recommended to read Teacher Ruan Yifeng’s Blog
Add the address, with pictures and texts, suitable for students who are new to flex to read
http://www.ruanyifeng.com/ blog/2015/07/flex-grammar.html
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html