<style type="text/css">
    div{
        width:300px;
        height:100px;
        text-align:center;
        line-height:100px;
    }
</style>
<div>
    <span>文字居中</span>
</div>

<style type="text/css">
    div{
        width:300px;
        height:100px;
        margin:0px auto;//上下边距为0，水平居中
        background:#ccc;
    }
</style>
<div>
    <span>文字居中</span>
</div>

<style type="text/css">
    div{
        width:300px;
        height:100px;
        position:relative;
    }
    div p{
        width:100px;
        height:20px;
        position:absolute;
        margin:auto;
        top:0;
        bottom:0;
        left:0;
        right:0;
    }
</style>
<div>
    <p>文字居中</p>
</div>

<style type="text/css">
    div{
        width:300px;
        height:100px;
        position:relative;
        background:#bbb;
    }
    div p{
        width:100px;
        height:20px;
        position:absolute;
        top:50%;
        margin-top:-10px;
        left:50%;
        margin-left:-50px;
    }
</style>
<div>
    <p>文字居中</p>
</div>