如何在页面容器内居中框架 div答案

【问题标题】：How to center a frame div inside the page container如何在页面容器内居中框架 div
【发布时间】：2015-09-22 12:40:22
【问题描述】：

您好，我有一个关于在父 div 中居中框架 div 的问题。我想将框架居中在 70% 宽的页面内，但我无法让它工作。我希望框架位于父 div WRAP 内部，而 WRAP div 位于 MAINWRAPPER 内部，宽度为 70%。

请帮忙:)

html{ 
		background-color:#EEE;
		font-family: 'Lato',Calibri,Arial,sans-serif;
		font-size:16px;
		color:#888;}
body{
		position:absolute;
		width:100%;	
		margin:0px;
		padding:0px;
}
#MAINWRAPPER {
		min-height:100%;
		position:absolute;
		right: 0;
    	left: 0;
    	margin:0 auto;
		padding:0;
		width:70%; /* page width */	
        background-color: #39f;
        border:1px solid #959595;
        }
#WRAP {
        position:relative;
		display:block;
		margin:0 auto;
        border:1px solid red;
}
.frame {
        width:100%;
        height:300px;
		position:relative;
		float:left;
		background-color:#fff;
		display:block;
		border:1px solid #959595;
		border-radius:4px;
		text-align:center;
		margin:2%;
}	
.frame a{
		display:block;
		width:100%;
		height:100%;
		color:#333;
		}		
.frame a:hover{
		display:block;
		color:#FFF;
	}
.title {
		display:block;
		position:absolute;
		overflow:hidden;
		top:0;
		background-color:#ccc;
		padding:3px 0;
		width:100%;
		height:auto;
		border-bottom:1px solid #959595;}
		
div.price {
	display: block;
	position: absolute;
	bottom: 1px;
	right: 0;
	height: 1.6em;
	width: 3em;
	background-color: #33CCFF;
	border-radius:5px;
	border:2px solid #FFF;
	color:#FFF;
	font-size:1.2em;
	font-weight:bold;
	text-align:center;
}

<body>
<div id="MAINWRAPPER">
    <div id="WRAP">
  <div class="frame"><a href="#">
  <object class="title">TITLE</object></a><div class="price">50</div></div>
</div>
</div>
</div>    
</body>

【问题讨论】：

应用宽度：96%；你应用宽度：100% + 2% 边距 = 总计 104%

标签： html css frame centering

【解决方案1】：

从.frame 中删除width and float 并尝试这样：Demo

.frame {
    height:300px;
    position:relative;
    background-color:#fff;
    display:block;
    border:1px solid #959595;
    border-radius:4px;
    text-align:center;
    margin:2%;
}

【讨论】：