浮动元素垂直居中

1.已知元素宽高

<-- css -->
.nav{
  background:white;
  width:200px;
  height:200px;
  position:absolute;
  top:50%;
  left:50%;
  margin-top:-100px;  //二分之一元素宽高
  margin-left:-100px;
}

2.未知元素宽高

<-- css -->
.nav{
    width:200px;
  height:200px;
  background:pink;

  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;

  margin:auto;
}

3.让图片垂直居中

<-- css -->
.img{
    display:table-cell;
  text-align:center;
  vertical-align:middle;
}

vertical-align 属性设置元素的垂直对齐方式。

display:table-cell指让标签元素以表格单元格的形式呈现，使元素类似于td标签。IE8+及现代版本的浏览器都支持此属性，IE6/7不支持（可用其他方法实现类似效果）。同样，display：table-cell属性也会被float，position：absolute等属性破坏效果，应避免同时使用