html多个盒子重叠浮动,如何让浮动后的多个盒子水平居中

html>

试验浮动元素水平居中

.div1,

.div2 {

border: 1px solid black;

width: 900px;

height: 500px;

}

.f {

float: left;

}

.center {

margin-left: 50%;

width: 1px;

height: 30px;

border-left: 1px solid green;

position: relative;

}

.float1 {

background-color: #ddd;

width: 100px;

height: 100px;

position: relative;

left: -50px;

margin-left: 50%;

}

.float2,

.float3 {

padding: 30px;

border: 1px solid red;

}

测试内容

我是内容撑开部分

$(function() {

var sumWidth = $(".float2").outerWidth() + $(".float3").outerWidth();

var left = -(sumWidth / 2);

$(".float2").css({

"position": "relative",

"margin-left": "50%",

"left": left + "px"

});

$(".float3").css({

"position": "relative",

"left": left + "px"

});

});