# 排列元素-置中篇
[my practice](https://codepen.io/Jamixcs/pen/QWBgXgj)
[戰艦小遊戲](https://hexschool.github.io/flexbox-pirate/index.html#/simple)
[Flexbox Playground](https://codepen.io/peiqun/pen/WYzzYX)

---

1. div置中
(1)position＋margin：
position:absolute ->使元素放在中央
absolute是從該元素的「左上角」為基準開始算，所以在X、Y軸各設50%，是對應元素左上角(紅色點)的50%。
設置完會讓元素的左上角在最中央，下圖範例元素在淺灰色區塊。
如圖，我們可以再利用margin-top、margin-left 把元素往回推，數值：(高/2)以及(寬/2)

(2)於父元素加上align-items:center和justify-content:center

justify-content:以主軸線為準；align-items:以交錯軸線為準
主軸線為目前元素排列的方向；交錯軸線則為相反方向。

(3)Position + Transform

2. 文字置中
水平置中 ->text-align:center;
垂直置中 ->line-height:區塊的高;