如何使文本垂直和水平显示在此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/