水平居中
行内元素居中
行内元素居中只针对行内元素或块状元素属性display被设置为inline（子元素未被float影响），比如文本、图片、按钮等行内元素，可通过给父元素设置text-align: center来实现。块状元素居中
(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>
垂直居中
- 父元素高度确定的单行文本
父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的height和line-height高度一致来实现的。(height: 该元素的高度，line-height: 顾名思义，行高，指在文本中，行与行之间的基线间的距离 )。
.wrap h1{
height: 100px;
line-height: 100px;
}
<div class="wrap">
<h1>Hello world</h1>
</div>
- 父元素高度确定的多行文本
方法一：
使用插入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>
