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

Question

您好，我有一个关于在父 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>

Answer 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%;
}

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

How to center a frame div inside the page container

html

css

frame

centering