文本垂直居中总结


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齐飞

有美一人兮,见之不忘。一日不见兮,思之如狂。 这里的情形如上;且仅能适配定高元素;