<div class="father" >
<div class="son">
这里的内容永远相对父元素居中
</div>
</div>
第一种（未知宽高元素水平居中）
.son{
display:table; /*重点就是这个属性,这个样式会告知浏览器当前元素的宽度,采用最小的宽度.不是默认全宽*/margin:0auto;
}
这种方式对于垂直居中还是不能实现
第二种（需要父元素确定宽高的子元素居中）
.father {
display:table-cell;
width:300px;
height:300px;
text-align:center;
vertical-align:middle;
background:rgba(0,0,0,0.5);
}
.son {
background:red;
display:inline-block;
}
该方法对于已经确定父元素的宽高的居中很有效，但是对于父元素宽高是百分比设置的则无效
第三种（借助废弃元素b实现完美居中）
<div class="father">
<b class="b"></b>
<div class="test">居中元素</div>
</div>
样式
.father {width:100%; height:100%; text-align:center; }
.b {display:inline-block; width:0px; height:100%; vertical-align:middle;}
.son {background:red; display:inline-block;}
该方法完美解决各种问题，是本人最常用的方式
