元素垂直居中

不固定宽度的盒子的水平居中

HTML

      
6b6

方法一: display: table-cell;
CSS

.divBox{
       list-style: none;
       display:table;
       margin: 40px auto;
}
.divBox div{
       display:table-cell;
}

方法二: 定位

.divBox{
      float: left;
      position: relative;
      left: 50%;
}
.divBox div{
      list-style: none;
      position: relative;
      left: -50%;
}

固定宽度的元素垂直居中
定位：

.divBox{
  width:400px;
  height:400px;
  position:relative;
}
.divBox div{
  width:80%
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  magrin : auto;
}