几种居中方式，分情况使用：
1.已知父盒子宽度，子盒子宽度；
div{
transform: translate(-50%,-50%);
//margin-left: - 自身宽度一半；
position: absolute;
left: 50%;
top: 50%;
}
2.div标签下img标签参考span元素；
img{
vertical-align: middle;
}
span{
display: inline-block;
height: 100%;
vertical-align: middle;
}
div:after{
content: "";
display: inline-block;
height: 100%;
vertical-align:middle;
}
3.利用表格table；div下的span
div{
display:table;
}
span{
text-align：center;
vertical-align: middle;
display: table-cell;
}
4.流式布局居中,div下的span；
div{
display:flex;
}
span{
margin: auto;
}
5.div包含ul，ul宽度不确定，li宽度不确定，个数不确定；
.slideBox .hd {
position: relative;
*text-align: center;
margin-top: -20px;
z-index: 23;
}
.slideBox .hd ul {
display:table;
margin-left:auto;
margin-right:auto;
margin-top: -50px;
margin-bottom: 20px;
}
.slideBox .hd ul li {
width: 143px;
height: 32px;
margin-right: 10px;
cursor: pointer;
background-color: rgba(255, 255, 255, .5);
border-radius: 4px;
/* ================= */
float:left;
*float:none;
*display:inline;
*zoom:1;
z-index: 20;
}
示例效果如下：
