css3 float 垂直居中

CSS3中的float属性不仅可以让元素浮动到左边或右边，还可以用来实现垂直居中。下面我们来介绍一下如何使用float属性来实现垂直居中。

.center {
      float: left;
      position: relative;
      top: 50%;
      transform: translateY(-50%);
}
    

代码中我们首先将元素向左浮动（float: left; ），然后将元素相对于父元素进行定位（position: relative; ）。接着我们使用top属性把元素向下移动50%（top: 50%; ）。但是此时元素只是以顶部为基准点向下移动了50%，所以还需要使用transform属性把元素向上移动50%，从而实现垂直居中效果（transform: translateY(-50%); ）。

需要注意的是，这种垂直居中方法只适用于父元素高度确定的情况，如果父元素高度是自适应的，那么就需要用其他方法来实现垂直居中。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！