<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文檔</title> </head> <style> .container{ width:800px; margin:0 auto; border:1px solid red;} </style> <body> <div class="container" > <h3>1.單行文字居中</h3> <!--設置行高來實現--> <div style="border:1px dashed red; line-height:60px; margin:30px;"> 這是高度為30像素的單行文字 </div> <h3>2.多行文字不定高度居中</h3> <!--運用padding來實現--> <div style="border:1px dashed red; padding:60px 0; margin:30px;"> <div>多行文字不定高度居中</div> <div>多行文字不定高度居中</div> <div>多行文字不定高度居中</div> </div> <h3>3.多行文字定高度居中</h3> <div style="border:1px dashed red; margin:30px; height:80px;"> <span style="vertical-align:middle;display:inline-block; ">中中中<br>中中中中中中中中中中中中中</span> <!--span只能用line-heigth才能設置高度(用來撐開外邊的div)， 用font-size:0px;來隱藏文字(行高必須在不為空的情況下才起作用)--> <span style="line-height:80px; ; display:inline-block;"> 你看不到我哦(請設置font-size:0)</span> </div> </div> </body> </html>