浅谈居中

1.文本水平居中/垂直居中

span{
    text-align:center;
    vertical-align:middle;
}

2.文本垂直居中（单行）

div{
    height:30px;
    line-height:30px;
} 

3.块级元素居中

div{
    width:100px; /* 必须有宽度*/
    margin: 0 auto;
}

4.居中（绝对定位-已知宽度）

    <div class="big">
        <span class="small">世界变得好安静，不敢用力的呼吸。因为我害怕这是梦境，不小心会惊醒</span>
    </div>
    .big{
    position:relative;
}
.small{
            display:inline-block;
            position:absolute;
            width:200px;
            top:50%;
            left:50%;
            margin-top:-100px;
            margin-left:-100px;
        } 

5.居中-绝对定位-未知宽度.

small{
    display:inline-block;
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

6.表格居中

  <table align="center" valign="middle">
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
</table>

图片居中

img{
  display:inline-bolck;
  margin；0 auto;
}