浮动元素垂直居中分父盒子有宽高和父盒子没有宽高两种情况。

父盒子有宽高

可以用下面两种方法来实现
方法1：

 #parent {
      width: 600px;
      height: 600px;
      position: relative; /*注意父盒子要相对定位*/
      background-color: pink;
    }

 #child {
      background-color:#6699FF;
      width:200px;
      height:200px;
      position: absolute;
      top: 50%; /*容器的一半*/
      left: 50%; /*容器的一半*/
      margin-top:-100px ; /*子盒子高度的一半*/
      margin-left: -100px; /*子盒子高度的一半*/
    }

方法2：

 #child {
      width: 200px;
      height: 200px;
      background-color: #6699FF;
      margin:auto;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }

HTML：

<div id="parent">
  <div id="child"></div>
</div>

运行代码：

父盒子没有宽高

 #parent {
      position: relative; /*注意父盒子要相对定位*/
      background-color: pink;
    }

 #child{
      width: 200px;
      height: 200px;
      background-color: #6699FF;
      margin:auto;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }

HTML：

<div id="parent">
  <div id="child"></div>
</div>

运行结果：

由于父盒子是没有宽高的, 所以子盒子就相对于页面顶部垂直居中了。

父元素内的所有行内元素水平垂直居中

父元素中组合使用display:table-cell、text-align 、vertical-align，使父元素内的所有行内元素水平垂直居中,这在子元素不确定宽高和数量时，很实用。
示例：垂直居中一个<img>
<img>的容器设置如下：

#container     
{
    display:table-cell;
    text-align:center;
    vertical-align:middle;
}