如何垂直居中一个浮动元素？

父元素高度未知

.progres {
    position: relative;
}
.progres .bar {
	float: right;			/*这里的浮动失效了*/
    width: 133px;
    height: 13px;
    position: absolute;   /*子绝父相，父元素相对定位，自元素绝对定位：上下左右偏移量为0*/
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;		/*同时给子元素margin：auto；*/
    border: 1px solid #c81523;
    border-radius: 6px;
}

如果要用子绝父相来垂直居中一个浮动的子元素，这个时候，由于子元素设置了绝对定位，会使本身的浮动属性失效。
在某些场景下，需要对已经浮动了的元素进行水平垂直居中，就直接用定位：子绝父相。
注意点：浮动与绝对定位不要一起设置，否则浮动属性会失效。

拓展：浮动与相对定位一起设置会如何？

.father {
  width: 600px;
  height: 400px;
  background-color: red
}
.son {
  float: right;
  width: 200px;
  height: 200px;
  background-color: pink;
  position: relative;
  top: 10px;
}

在这里我们可以看到：子元素既有浮动的效果（右浮动），又有相对定位的效果（top：10px；）。
所以浮动与相对定位可以一起设置，相对定位不会改变浮动属性。
注意点：当浮动与相对定位一起设置时，首先会进行浮动，然后在浮动之后的位置上进行相对定位

总结：
          div｛float :left;position:relative｝这样是可以的
          div｛float :left;position:absolute｝不允许，绝对定位会使浮动失效