Edit in JSFiddle


              
            
          
            
              
                
<div id="main" class="elem">
    <span class="label begin"> &lt;div id="main"&gt; </span>
    <p> 设置块级元素的 width 可以阻止它从左到右撑满容器。然后你就可以设置左右外边距为 auto 来使其水平居中。元素会占据你所指定的宽度,然后剩余的宽度会一分为二成为左右外边距。</p>
    <p>唯一的问题是,当浏览器窗口比元素的宽度还要窄时,浏览器会显示一个水平滚动条来容纳页面。让我们再来改进下这个方案...</p>
    <span class="label end"> &lt;/div&gt; </span>
</div>
#main {
  width: 600px;
  margin: 0 auto; 
}
.elem{
    border:solid #6AC5AC 3px;
    position:relative;
}
.label{
    position:absolute;
    background-color:#6AC5AC;
    line-height:1em;
    padding:3px;
}
.begin{
    left:0;
    top:0;
}
.end{
    right:0;
    bottom:0;
}
p{
    margin:2em 0;
    display:block;
}