[分享]CSS两个浮动的div上下居中

元素上下居中。其中一个比较流行的做法是使用相对定位和负边距的组合，下面是一段实现这个效果的CSS代码：

 #container {
    position: relative;
    height: 100%;
  }
  #box1, #box2 {
    position: absolute;
    top: 50%;
  }
  #box1 {
    margin-top: -25px; /* box1的高度 */
  }
  #box2 {
    margin-top: 25px; /* box2的上外边距 */
  } 

上述代码中，我们首先给父元素#container一个相对定位，这样绝对定位的子元素会以其为相对参照物。然后，我们给两个浮动的子元素#box1和#box2一个相同的定位: top: 50%。这样，它们就被移动到了父元素的中间位置。

接下来，我们需要用负边距手动微调下#box1和#box2的位置。对于#box1，我们需要把它向上移动25像素(即其高度的一半)，所以我们设置其上外边距为-25px。对于#box2，我们需要把它向下移动25像素，所以我们设置其上外边距为25px。

最后，我们可以给#box1和#box2设置一个相同的宽度和高度，以获得更一致的外观效果。