如果文章对你有帮助，请点喜欢并关注，这将是我最大的动力，谢谢
1.水平居中
1.1.文字，图片以及内联元素：
如果希望居中的是内联元素或者是文字图片
text-align:center;
1.2.块状元素
1.2.1.对于已设置宽度的块状元素：
margin:0 auto;----------------------让margin的左右自适应，通常是居中
1.2.2.对于未设置宽度的块状元素：
1.使用table标签
html：
<table>
<tr>
<td>
<div id="container"></div>
</td>
</tr>
</table>
css:
table{
margin:0 auto;
}
这个不常用，因为添加了更多无意义的标签
2.通过将子块状元素变成行内元素
html:
<div>
<p>居中示例</p>
</div>
css:
p{
display:inline;
}
div{
text-align:center;
}
假设p在div内部，要让p居中
先给外层元素设置text-align:center，这个意思是让div里面的内联元素居中，然后将p变成内联元素，即可。
3.通过position
html:
<div>
<p>居中示例</p>
</div>
css:
div{
float:left;
position:relative;
left:50%;
}
p{
position:relative;
right:50%;
}
float:left，目的是让父元素靠左并且宽度与子元素等宽；然后相对于原先的位置，向右移动50%，此时该元素的left为50%+（50%父元素自身宽度）
然后将子元素相对于原先的位置，向左移动50%（这50%是基于父元素的宽度），此时居中。
2.垂直居中
2.1.对于已设置高度的单行文本
只需将父元素的height值与line-height的值设置相同即可
2.2.对于已设置高度的多行文本
1.使用table标签
html:
<table>
<tr>
<td>
<p>aaaaa</p>
<p>aaaaa</p>
<p>aaaaa</p>
</td>
</tr>
</table>
css:
table{
height: 500px;
background-color: #aaa;
}
因为table标签中的td拥有标签隐式的样式：vertical-align:middle;
2.通过table-cell
html:
<p>aaaaa</p>
<p>aaaaa</p>
<p>aaaaa</p>
css:
p{
display:table-cell;
vertical-align:middle;
}
table-cell的意思是让元素以表格单元的形似表现，但是只支持IE8以上浏览器
