昨天吃完 HTML 美味蟹堡，今天決定來消化一下。
結果第一個遇到的問題就是 ——
這個東西為什麼都不肯站中間？？？？？？？

明明我的要求很簡單。
就是：

你，站，中，間。

結果 CSS 一臉：
「哪個中間？」
「水平還是垂直？」
「主軸還是交叉軸？」
蛤？？？

我只是想置中，為什麼突然變方向感測驗 ==

先從最乖的開始：文字置中
如果今天只是要讓文字左右置中，那事情還算和平。

.title {
  text-align: center;
}

看到這裡我還想說：
CSS 置中也沒多難嘛～呵呵。
事情如果這麼簡單，我今天就不用寫這篇了!

結果換成 div，它就不理我了QQ
先做一個最簡單的 box：

<div class="box">
  我是方塊
</div>

.box {
  width: 200px;
  height: 100px;
  border: 2px solid black;
}

目前方塊很乖，但它還是牢牢黏在左邊。
接著我想：
剛剛文字用 text-align: center 就成功了，那 box 也來一下。

.box {
  width: 200px;
  height: 100px;
  border: 2px solid black;
  text-align: center;
}

結果文字站中間了，方塊本人還是黏在左邊。

不是欸。我要的是你整個人過去，不是只有裡面的字自己跑走 XD

這時候才重新確認：
text-align: center 主要是讓元素裡面的文字或 inline 內容置中，
不是把整個 block 元素搬到中間。

接著幫方塊本人搬家!
既然

text-align: center

只能把裡面的文字送進中間，
那這次就來處理方塊本人！

先加上CSS：

.box {
  width: 200px;
  height: 100px;
  border: 2px solid black;
  margin: 0 auto;
}

這次真的整顆方塊跑到中間了！！！

以前其實很常看到：

margin: 0 auto;

對它的理解大概就是：

嗯，置中咒語!

要置中？貼下去就對了。
至於為什麼？
不知道，反正它會動。嘻嘻

這次重新看才知道，

margin: 0 auto;

其實可以拆成：

margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;

也就是左右兩邊的 margin 都設定成 auto。
當方塊本身已經有設定寬度時，剩下的空間就會平均分配到左右兩側。
所以最後它就會乖乖跑到中間。
嗯……
原來不是方塊自己想通了，是左右一起把它擠到中間 XD

那上下呢？
左右成功了!

照理來說今天應該可以收工了吧？

但是人就是這樣。
成功一個之後就會開始想：

那上下也可以順便嗎？
目前的：

margin: 0 auto;

如果今天想要：

水平置中＋垂直置中

那事情就又不一樣了。

這時候有一位明天的主角準備登場——Flexbox。

但今天先到這。。。
不然再寫下去，我怕我等等又開始分不清楚：

justify-content

跟

align-items

到底誰是誰 ==

Day 3，闖關半完成！