css元素居中方法

几种居中方式，分情况使用：

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;
}

示例效果如下：