由布局学习CSS——对于Margin:0 auto实现居中的探究
一般在布局中我们对于常规流中的元素进行居中的方法都是设置它的margin为0,auto。对于其中的道理,其实是设计到是常规流中对块级非替换元素的margin值的计算。
对于常规流中的块级非替换元素的margin值的计算,有下面三个原则:
(1)If 'width' is not 'auto' and 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' (plus any of 'margin-left' or 'margin-right' that are not 'auto') is larger than the width of the containing block, then any 'auto' values for 'margin-left' or 'margin-right' are, for the following rules, treated as zero.
(2)If 'width' is set to 'auto', any other 'auto' values become '0' and 'width' follows from the resulting equality.
(3)If both 'margin-left' and 'margin-right' are 'auto', their used values are equal. This horizontally centers the element with respect to the edges of the containing block.