浮动元素如何居中

移动

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

1. 使用text-align属性

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

<code><br/>.parent { text-align:center; } .child { float:left; }</code>

2. 使用margin属性

ABS

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

<code><br/>.child { float:left; margin: 0 auto; }</code>

3. 使用display:flex属性

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

<code><br/>.parent { display:flex; justify-content:center; } .child { float:left; }</code>

4. 使用position属性和transform属性

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

<code><br/>.child { float:left; position:ABSolute; left:50%; top:50%; transform:translate(-50%,-50%);

}</code>