水平居中

1. 行内元素居中
   行内元素居中只针对行内元素或块状元素属性display被设置为inline（子元素未被float影响），比如文本、图片、按钮等行内元素，可通过给父元素设置text-align: center来实现。

2. 块状元素居中

(1) 定宽块状元素居中

.div {
    width: 200px;
    margin: 0 auto;
}

(2) 不定宽块状元素居中
方法一：
将要显示的元素加入到 table 标签当中，然后为 table 标签设置“左右margin”值为“auto”来实现居中； 或使用 display: table；然后设该元素“左右margin”值为“auto”来实现居中。

.wrap{
    background:#ccc;
    display:table;
    margin:0 auto;
}

<div class="wrap">
    Hello world  
</div>

方法二：
改变块级元素的display为inline类型（设置为行内元素显示），然后使用text-align: center来实现居中效果。
方法3：
通过给父元素设置float，然后给父元素设置position: relative和left: 50%，子元素设置position: relative和left: -50%来实现水平居中。

.wrap{
    float:left;
    position:relative;
    left:50%;
    clear:both;
}
.wrap-center{
    background:#ccc;
    position:relative;
    left:-50%;
}

<div class="wrap">
    <div class="wrap-center">Hello world</div>
</div>

垂直居中

1. 父元素高度确定的单行文本
   父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的height和line-height高度一致来实现的。(height: 该元素的高度，line-height: 顾名思义，行高，指在文本中，行与行之间的基线间的距离 )。

.wrap h1{
    height: 100px;
    line-height: 100px;
}

<div class="wrap">
    <h1>Hello world</h1>
</div>

2. 父元素高度确定的多行文本
   方法一：
   使用插入table (包括tbody、tr、td)标签，同时设置vertical-align: middle。

.wrap{
    height:300px;
    vertical-align:middle;   /* td 标签默认情况下就默认设置了 vertical-align 为 middle，可以不需要显式地设置 */
}

<table>
    <tbody>
        <tr>
            <td class="wrap">
                <div>
                    <p>Hello world</p>
                    <p>Hello world</p>
                    <p>Hello world</p>
                </div>
            </td>
        </tr>
    </tbody>
</table>

.wrap{
    display:table;
    vertical-align:middle;
}

<div class="wrap">
    <p>Hello world</p>
    <p>Hello world</p>
    <p>Hello world</p>
</div>

方法2：

设置块级元素的display为table-cell（设置为表格单元显示），激活vertical-align属性。但这种方法兼容性比较差， IE6、7 并不支持这个样式。

.wrap{
    height:300px;
    background:#ccc;
    
    display:table-cell;/*IE8以上及Chrome、Firefox*/
    vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}

<div class="wrap">
    <p>Hello world</p>
    <p>Hello world</p>
    <p>Hello world</p>
</div>