cssfloat浮动垂直居中

CSS `float` 属性通常用于实现元素水平布局中的浮动，但它本身并不直接支持元素的垂直居中。如果你想让一个浮动元素在容器内垂直居中，可以采用一些组合技术：

1. **Flexbox** (弹性盒模型)：如果容器的display属性设置为flex，你可以使用`align-items: center;`来使子元素在交叉轴（这里是垂直方向）上居中对齐。

   .container {
     display: flex;
     align-items: center;
     justify-content: center; /* 可选，如果你还想水平居中 */
   }

2. **Grid** (网格布局)：类似地，对于grid容器，可以使用`align-items` 和 `justify-items` 来调整行和列的对齐。

   .container {
     display: grid;
     align-items: center;
     justify-items: center;
   }

3. **Positioning and Wrapping**：另一种常见做法是在包含块中定位元素，然后清除其父元素的浮动影响，并为其添加合适的上下外边距。

   .parent {
     position: relative;
   }
   .child {
     position: absolute;
     top: 50%;
     transform: translateY(-50%); /* 或者使用padding-top: 50%; 切换到百分比 */
   }

4. **CSS Flexbox + Grid Mix**：结合使用两者，可以处理更复杂的布局需求。