这两天在仿京东商城，发现居中这个问题困扰死我了，首先来看下margin:0 auto；只有块级元素才能用这个，并且只是水平居中；
其次是父级元素如果设置了高，子元素也设置了高，此时只要子元素的行高line-height=height，子元素的内容就会垂直居中；
vertical-align:middle，把此元素放置在父元素的中部。所以可以设置此元素的垂直对其方式，比如设置图片和文字居中，
img{vertical-align:center}
<p><img src="">此图片位于文字中的图像</p>
此时图片就会中心跟文字对齐。
所以说如果块级元素设置vertical-align:center,它会与它的文字内容垂直居中。
img是inline-block元素。所以说设置了inline-block的元素设置vertical-align:center，它会与它的文字内容垂直对齐。
text-align:center:这个是设置文字内容水平居中，当然如果父元素是块级元素，子元素是行内元素设置了display:inline-block的话，这个子元素一样可以水平居中于父元素。
下面例子就是a可以水平居中于p，并且text-align是可以继承的，所有可以直接给父元素设置子元素就不用设置了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
300px;
height: 400px;
border: 1px solid red;
text-align: center;
}
a{display: inline-block; 40px;
height: 50px;
border: 1px solid black;}
</style>
</head>
<body>
<p>
<a href="">1212</a>
</p>
</body>
</html>