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

示例效果如下：