[CSS] 为什么margin:0 auto;可以让块级元素水平居中

https://www.w3.org/TR/CSS2/visudet.html#blockwidth

10.3.3 Block-level, non-replaced elements in normal flow

The following constraints must hold among the used values of the other properties:

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block

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.

If all of the above have a computed value other than 'auto', the values are said to be "over-constrained" and one of the used values will have to be different from its computed value. If the 'direction' property of the containing block has the value 'ltr', the specified value of 'margin-right' is ignored and the value is calculated so as to make the equality true. If the value of 'direction' is 'rtl', this happens to 'margin-left' instead.

If there is exactly one value specified as 'auto', its used value follows from the equality.

If 'width' is set to 'auto', any other 'auto' values become '0' and 'width' follows from the resulting equality.

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.

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • **2014真题Directions:Read the following text. Choose the be...
    又是夜半惊坐起阅读 9,787评论 0 23
  • 说起来这几天都干了什么,很羞涩,没错,我又追剧了。每次看完一部剧我都会默默的告诉自己这是自己追的最后一部剧,因为我...
    包逗豆DoubleD阅读 199评论 0 0
  • 早起,匆匆洗把老脸,带上急不可待的小乐乐,出发。 乐乐一撒开,欢蹦乱跳,赚来那么多那么多眼球。估计小主大脑细胞得多...
    娄娄姐阅读 241评论 0 1
  • 清清卢氏 演唱:张静(星光大道CCTV签约歌手) 作词:怡人 卢木鸟(词作家) 作曲编曲:姜山 (青年作曲家) 后...
    華狐发布阅读 799评论 0 0