相信大家在学习CSS的时候，一定有遇到过「水平置中」或是「垂直置中」的问题
margin:0 auto 可以使区块元素水平置中，但最近在教学文章上看到 margin:auto 一样可以置中，于是在好奇心驱使下，决定来记录一下这次的收穫
本文主要针对 margin: auto和 margin:0 auto 进行讲解

---

Margin事前小暖身

margin是 margin-top 、 margin-bottom 、 margin-left 、 margin-right 的速写(shorthand)
在这我画了一张图，以颜色区分了各个box的组成，如果对box-sizing还不是很理解，可以去看金鱼脑大神写的文章

我们可以看到margin就是在border外的範围，又叫「外边距」、「外距」，上下左右四面皆可设置，且可以是负数。长度单位有 %、px、em、auto等可使用。

语法如下

属性值说明margin[上下左右]一个值(代表四面所佔的空间一致)margin[上下] [左右]两个值margin[上] [左右] [下]三个值margin[上] [右] [下] [左]四个值

margin的预设值，四面皆为0

本图撷取自MDN

---

margin:auto与 margin: 0 auto

margin:auto 在MDN上的解释是这样的:

The browser selects a suitable margin to use. For example, in certain cases this value can be used to center an element.

意思大致上是说，margin:auto 代表浏览器会帮我们自动计算出合适的外边距，一般常用来置中元素，换句话说就是会把剩下的空间平均分配给四周。

实例示範

HTML:

    <div class="container">        <div class="center">我是要被置中的区块元素</div>    </div>

CSS:

  div.center {            background-color: rgb(227, 163, 228);            font-size: 22px;            width: 245px;  /*width一定要设*/            margin: auto;  /*或是margin: 0 auto*/        }

呈现如下

为了好辨认，加上了肤色背景。
需要留意的是，如果没有给居中元素一个width，就会无效，而且该元素一定不能设置float，否则也会无效。

可以试试看改成margin: 0 auto 也会是一样的效果，不会有任何变化!

But why???

试想一下

margin:auto 就是 margin:auto auto auto auto 的简化margin:0 auto 就是 margin:0 auto 0 auto 的简化

会影响水平置中的是水平的margin，也就是左右两边，既然都是auto，则代表浏览器会自动将剩余的空间平均分配到左边和右边，加上margin四面的预设值本来就是0，所以两者才会是一样的~

但这个神话是建立在html的writing-mode: horizontal-tb 和direction direction: ltr的情况下(预设)。
那如果把writing-mode设为vertical-lr(垂直)还可以置中吗?
CSS:

 div.center {            background-color: rgb(227, 163, 228);            font-size: 22px;            width: 245px;   /*width一定要设*/            margin: auto;            /* writing-mode*/            writing-mode: vertical-lr;            -webkit-writing-mode: vertical-lr;  /*前缀-webkit-适用于chrome、Safari*/            -ms-writing-mode: vertical-lr;      /*前缀-moz- 适用于Firefox，*/        }

p.s CSS还有其他的前缀词，这里不多做介绍了，有兴趣可以点此连结


呈现结果会像底下这张图，挖咧!我只新增了writing-mode: vertical-lr，就无法置中了(° △ °)

验证了margin:0 auto 和 margin:auto 是基于书写模式为水平和书写方向为左至右的前提下才可行。

---

margin:auto的变化

继续沿用上面的例子~
把原本的margin:auto 改成margin-left:auto 会是什么样子呢?

CSS:

  div.center {            background-color: rgb(227, 163, 228);            font-size: 22px;            width: 245px; /*width一定要设*/            margin-left: auto;                 }

呈现如下

元素靠到右边去了，这是为什么呢?

因为auto是浏览器会自动把剩余空间做分配，依照这个逻辑，margin-left:auto会把剩余的空间分配到元素左侧，所以元素才会靠右边。

我想这也可以算是一个排版的技巧吧ヽ(✿ﾟ▽ﾟ)ノ

sumary总结

margin:0 auto和margin:auto都可以做到置中的效果，但前提是要在writing-mode: horizontal-tb和direction direction: ltr的情况下(预设)。

margin中的auto是浏览器会自动把剩余空间做分配的意思。

margin-left:auto会靠右;相反的，margin-right:auto会靠左。

---

今天的笔记就到这边啰!希望对你会有帮助。所学不精，若有解说不够详尽或是错误欢迎指教，感激不尽

参考文章:
margin置中
MDN-margin