<div class="label_middel" style="width:40px;">居中的文字</div>
.label_middel{
height:34px;
overflow:hidden;
line-height:34px;
TEXT-ALIGN: center;
}
关键在于 line-height:34px; height:34px;即line-height==height
不过这只适合于单行文本
对于多行文本:
<body>
<div style="width:100%; text-align:center;padding-top:100px; padding-bottom:100px;border:1px solid #000;">
居中的文字<br>居中的文字<br>居中的文字<br>居中的文字<br>
</div>
</body>
关键在于padding-top==padding-bottom,这里padding-top:100px改成padding-top:10%,使用百分比也同样能达到效果,不过似乎也不好控制
还有一种方法是在<div>中加入<span>标签
<div style="width:100%;height:200px;text-align:center;display:table-cell;vertical-align:middle;border:1px solid #000;">
<span style="width:0;height:100%;display:inline-block;vertical-align:middle;"></span>居中的文字</div>
注意"居中的文字"是在<span>标签后面,而不是里面,这种情况也只适合单行,好处是不用指定高度