如何使浮动的元素居中

<div class="content">
  <div class="left">
    <div class="con">这是一个浮动的</div>
  </div>
</div>

body{
	width:100%;
	height:100%;
	padding:0px;
	overflow:hidden;
}
.content{
	width:100%;
	height:100%;

}
.left{
	width:400px;
	height:400px;
	background:#f00;
	float: left;
	position:relative;
	left:50%;
}
.con{
	background:#000;
	width:100%;
	height:100%;
	float:left;
	position:relative;
	left:-50%;
	color:#fff;
}

即：父级元素.left相对定位，左浮动，left:50%;子元素.con相对定位，左浮动，left:-50%。