文本垂直居中总结

---

1. 伸缩盒模型(Flexbox)

有美一人兮，见之不忘。一日不见兮，思之如狂。 　　凤飞翱翔兮，四海求凰。无奈佳人兮，不在东墙。 　　将琴代语兮，聊写衷肠。何日见许兮，慰我徬徨。 　　愿言配德兮，携手相将。不得於飞兮，使我沦亡。

display: -webkit-box; display: -moz-box; display: -webkit-flex; display: flex;
-webkit-box-align: center;-moz-box-align: center;
-webkit-align-items: center; align-items: center; -webkit-box-pack: center;
-webkit-justify-content: center; justify-content: center;

display: -webkit-box; display: -moz-box; display: -webkit-flex; display: flex;
-webkit-box-align: center;-moz-box-align: center;
-webkit-align-items: center; align-items: center; -webkit-box-pack: center;
-webkit-justify-content: center; justify-content: center;

#demo1>p{flex-grow: 1; //分配剩余空间;
text-align: center;}

2. 表格块(Table-Cell)

#demo2{display: table;}
#demo2>p{display:table-cell;vertical-align:middle;}

3. 绝对居中块(Absolute Centering)

#demo3{position:relative;} 
#demo3>p{width:80%;height:50%;margin:auto;position: absolute;top:0;right:0;left:0;bottom:0; }

4. 行内块(Inline-Block)

有美一人兮，见之不忘。一日不见兮，思之如狂。 仅能适配单行文本;

#demo4{text-align:center; overflow: auto; } 
#demo4:before {content:'';display:inline-block;vertical-align:middle;height:100%;width:0; }

凤飞翱翔兮，四海求凰。无奈佳人兮，不在东墙。 　　将琴代语兮，聊写衷肠。何日见许兮，慰我徬徨。 　　愿言配德兮，携手相将。不得於飞兮，使我沦亡。

#demo4{text-align:center; overflow: auto; } //文字过多情况
#demo4:before {content:'';display:inline-block;vertical-align:middle;height:100%;width:0; }

凤飞翱翔兮，四海求凰。无奈佳人兮，不在东墙。 将琴代语兮，聊写衷肠。何日见许兮，慰我徬徨。 愿言配德兮，携手相将。不得於飞兮，使我沦亡。

#demo4{text-align:center;} //多行文本情形；
#demo4:before {content:'';display:inline-block;vertical-align:middle;height:100%;width:0; }

5. line-height与height齐飞