将子<div>居中到屏幕宽度，而不是父<div> </div> </div>

Question

有一个狭窄的DIV，其中包含更宽的DIV。如何在浏览器窗口（而不是父DIV）中水平居中子DIV，使左右边距相等？

<div id="narrow_container" style="float:left;">
     <div id="wide_contents">
     </div>
</div>

Answer 1

我认为这就是你所追求的：Center Align on a Absolutely Positioned Div

Answer 2

可能的CSS：

<style>
#narrow_container {display: block; 
   width: 600px; 
   margin: 0 auto;
} /* narrow div, this can be anything except position: relative */
#wide_contents {position: absolute;  
   width:400px;
   margin-left:-200px; 
   left:50%; 
} /* screen-centered div */
</style>

你基本上只是将元素相对于窗口绝对定位，因为绝对定位相对于最近的父position: relative定位。如果您没有position: relative的父母，则默认为文档正文。

定心技术相当普遍，并利用宽度为元素宽度一半的负边距，然后将元素从左侧定位50％。这会产生一个水平居中的元素。