[分享]css中float什么才能居中

CSS中float（浮动）属性是常用来实现网页排版效果的一个属性，可以让元素在页面中左浮动或右浮动，并允许其他元素紧贴着它的旁边排列。但是对于如何将float元素居中这一问题，往往令开发者比较头疼。....

CSS中float（浮动）属性是常用来实现网页排版效果的一个属性，可以让元素在页面中左浮动或右浮动，并允许其他元素紧贴着它的旁边排列。但是对于如何将float元素居中这一问题，往往令开发者比较头疼。

.float-center {
  float: left;
  margin-right: -50%;
  text-align: center;
}
.float-center:after {
  content: "";
  display: inline-block;
  width: 0;
  height: 100%;
  vertical-align: middle;
}
.float-center p {
  display: inline-block;
  margin-right: -4px;
  vertical-align: middle;
} 

上面的代码就可以实现将一个浮动元素居中，其中主要用到了以下几点技巧：

• 将元素的浮动方向设为左浮动，并设置右外边距为元素宽度的负值，使元素向左偏移了一半
• 设置元素的父容器为文字居中，用:after伪元素将一个行高等于元素高度的空内容块塞到父容器中，并设置该元素与内部元素垂直居中

需要注意的是，该方法只适用于居中的元素是定宽元素，对于宽度不确定、自适应的元素，还需要使用其他技巧进行实现。