浮动场景:
<div>
<div class="left">left</div>
</div>
#container{
width:400px;
height:110px;
border:1px solid black;
}
#container div{
width: 100px;
height:100px;
float:left;
margin:o auto;
background-color: red;
}
运行代码效果:
方法一:
在浮动元素外面再嵌套一层div,嵌套的div的宽度设置为和浮动元素宽度相同,代码如下:
<div id="container">
<div class="content">
<div class="left" >left</div>
</div>
</div>
#container{
width: 400px;
height: 110px;
border: 1px solid black;
}
.content{
width: 100px;
margin: 0 auto;
}
.content div {
width: 100px;
height: 100px;
float: left;
background-color: red;
}
运行效果:
方法二:
定位+浮动 利用元素溢出解决浮动居中问题
<div class="content">
<div class="left">left</div>
</div>
.left{
float: left;
background-color: red;
position: relative;
left: -50%;
}
.content{
float: left;
position: relative;
left: 50%;
}
方法三:
定位 + 浮动 + margin
- 不需要在浮动元素外面再次设置元素
- 需要设置宽度
.left{
float: left;
width: 100px;
background-color: yellow;
position: relative;
left: 50%;
margin-left: -50px;
}
<div class="left">left</div>
总结
第一种和第三种方法都需要设置宽度,第二种方法不需要设置宽度