1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <style type="text/css"> 8 .parent { 9 text-align: center; 10 display: table-cell; 11 vertical-align: middle; 12 } 13 14 .child { 15 display: inline-block; 16 } 17 </style> 18 </head> 19 20 <body> 21 <div class="parent"> 22 <div class="child">DEMO</div> 23 </div> 24 </body> 25 26 </html>
很容易便能看出，這其實是inline-block水平居中方案以及table-cell垂直居中方案的合用，也算是把文本排版的特性都利用了個遍了。