如何讓我的文字在這個DIV的中心出現在橫向和縱向上？

Question

我需要垂直和水平居中文本。有沒有簡單的方法來做到這一點爲下面的代碼？

<div style="display: block; height: 25px;"> 
    <span id="ctl_txt" style="background-color: rgb(255, 0, 0);"> 
     Basic 
    </span> 
</div> 

Answer 1

可以使用text-align屬性的文字水平居中，並line-height等於DIV高度垂直居中行內元素。

<div style="display: block; height: 25px; text-align:center; line-height:25px;"> 
    <span id="ctl_txt" style="background-color: rgb(255, 0, 0);">Basic</span> 
</div> 

Example here。

Answer 2

另一種方式來做到這一點，從@Jose不同，是用

display:table;和display:table-cell

這樣

div{ 
    display:table; 
    height:125px; //JUST FOR SHOW 
    width:125px; //JUST FOR SHOW 
} 

span{ 
    background-color: rgb(255, 0, 0); 
    display:table-cell; 
    vertical-align:middle; 
    text-align:center; 
} 

然後vertical-align:middle;和text-align:center;做的工作。

實施例：http://jsfiddle.net/jasongennaro/unfwL/1/