浮动元素如何居中

浮动元素的居中有多种方法，下面介绍一些常用的方法：

1. 使用text-align属性

如果父元素是块级元素，可以给父元素设置text-align:center属性来让其中的浮动元素居中。

```

.parent {

text-align:center;

}

.child {

float:left;

}

```

2. 使用margin属性

可以给浮动元素设置相同的左右margin值，这样就能让浮动元素居中了。

```

.child {

float:left;

margin: 0 auto;

}

```

3. 使用display:flex属性

可以给父元素设置display:flex属性，然后设置justify-content:center属性来让其中的浮动元素居中。

```

.parent {

display:flex;

justify-content:center;

}

.child {

float:left;

}

```

4. 使用position属性和transform属性

可以使用position属性将浮动元素设置为绝对定位，并使用transform属性将其位置向左上方移动一半的宽度和高度，这样就能让浮动元素居中了。

```

.child {

float:left;

position:absolute;

left:50%;

top:50%;

transform:translate(-50%,-50%);

}

```