文章目录
浮动元素居中的三种方法方法一方法二方法三总结
浮动元素居中的三种方法
方法一
知识点：
浮动
样式：
.left{
floa: left;
width: 100px;
background-color: yellow;
}
.content{
width: 100px;
margin: 0 auto;
}
left
方法说明：
在要浮动元素的外面嵌套一个v标签，并且这个div标签的宽度设置为与要浮动元素的宽度相同，在设置一下margin值即可
方法二
原理：
利用元素溢出解决浮动居中问题
知识点：
定位 + 浮动
.left{
float: left;
background-color: yellow;
position: relative;
left: -50%;
}
.content{
float: left;
position: relative;
left: 50%;
}
left
特点：
浮动元素以及外面嵌套的那一层都变成行内块元素了
方法三
知识点：
定位 + 浮动 + margin
.left{
float: left;
width: 100px;
background-color: yellow;
position: relative;
left: 50%;
margin-left: -50px;
}
left
特点：
不需要在浮动元素外面再次设置元素需要设置宽度
总结
第一种和第三种方法都需要设置宽度，第二种方法不需要设置宽度