浮动元素居中的三种方法

浮动元素居中的三种方法

方法一

知识点：

• 浮动

样式：
.left{
	floa: left;
	width: 100px; 
	background-color: yellow;
}
.content{
	width: 100px;
	margin: 0 auto;
}




	<div class="content">
		<div class="left">left</div>
	</div>

方法说明：

• 在要浮动元素的外面嵌套一个v标签，并且这个div标签的宽度设置为与要浮动元素的宽度相同，在设置一下margin值即可

方法二

原理：

• 利用元素溢出解决浮动居中问题

知识点：

• 定位 + 浮动

.left{
                float: left;
                background-color: yellow;
                position: relative;
                left: -50%;
            }
            .content{
                float: left;
                position: relative;
                left: 50%;
            }
            

<div class="content">
	<div class="left">left</div>
</div>            

特点：

• 浮动元素以及外面嵌套的那一层都变成行内块元素了

方法三

知识点：

• 定位 + 浮动 + margin

.left{
                float: left;
                width: 100px;
                background-color: yellow;
                position: relative;
                left: 50%;
                margin-left: -50px;
            }
            
            
            
<div class="left">left</div>

特点：

• 不需要在浮动元素外面再次设置元素
• 需要设置宽度

总结

第一种和第三种方法都需要设置宽度，第二种方法不需要设置宽度