margin-x 若为auto，怎么排?

你可能知道不论是 margin: auto; 还是 margin: 0 auto; 效果都是一样的，都是让元素水平居中了，但纵向并没有任何变化。

 

根据规范，margin-top: auto; 和 margin-bottom: auto;，其计算值为0。

这也就解释了为什么 margin: auto; 等同于 margin: 0 auto;。

 

但这不是全部：

得看网页的布局方式：它们还与书写模式 writing-mode 和 文档流方向 direction 有关。

默认是 writing-mode: horizontal-tb; 和 direction: ltr; 的情况。按照这个方式排列的话，理所应当，margin-top/margin-bottom的auto值是0。

常识性的知识，如果是纵向的话，那你自己也可以推算出，margin-left/margin-right的auto值是0。

所以，听了这些，才发现一种语言的设计其实基本上和生活的理论是一致的，这也是为什么愿意说：你只有理解了生活，才能成为一个架构师的原因。

 

回到margin: 0 auto;为什么能水平居中这个问题？

因为水平方向的 auto，其计算值取决于可用空间（剩余空间）。

 

（1）都是auto，那么margin的left和right就为：可用空间/2

（2）left为auto，则margin-left=可用空间

（3）right为auto，则margin-right=可用空间

 

简单而粗暴：

margin-left: auto; 即右对齐。

margin-right: auto; 即左对齐。

 

原文参考：http://blog.doyoe.com/~posts/2013-11-29-margin%E7%B3%BB%E5%88%97%E4%B9%8Bkeyword%20auto.md