《精彩绝伦的CSS》——布局（二）居中块状框

二、居中块状框

最容易理解的就是，给一个固定宽度的父元素内的子元素居中，只需确定子元素宽度，接着计算子元素左右需留出多少空白用子元素的外边距或者父元素的内边距都可以轻松解决。如：

div#contain{width:800px;}

div#main{width:760px;margin:0 20px;}

还有一种情况是，有一个固定宽度的元素，但不知道容器有多大。这时仍可以使用外边距实现。

div#main{width:55em;margin:1 auto}

之所以能这样做是因为CSS规范中说明：当一个元素具有特定的宽度，并且左右外边距都为自动确定时，浏览器会取元素和容器宽度之差，除以二后分别应用在元素的左右外边距上。因此，元素框就被居中了。

要注意的是div比它的容器宽的情况在由左到右书写的语言中，浏览器会将元素框（而不是内容）左对齐，而在由右到左书写的语言中，浏览器会将元素框右对齐。

若要使框内文字也跟着居中只需设定：text-align:center即可