昨天嘗試了用line-height來做到垂直置中，
今天試試看用position來達到垂直置中的效果。
照慣例還是請到阿鼠，

阿鼠臉太大。

我們把阿鼠放到一個籠子裡，

<div class="animalCage">
    <img class="rat" src="https://drive.google.com/uc?id=1fcd_Kd1kO6Oklsesi8G-zuHm40KOSKuX" height=200px>
</div>

.animalCage {
  background-color : #00aa00;
  height: 519px;
  width: 300px;
  border: 3px solid;
}

鼠鼠很緊張，躲到籠子的角落了。

先打造一個舒適的環境給鼠鼠，
將我們的籠子(父元素) 的position指定為relative，

position: relative;

(再把阿鼠打個麻醉，)

position: absolute;

這樣想把阿鼠放哪裡就放哪裡囉！

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

阿鼠就躺在正中間囉！！！

如果指定position: absolute，會相對於父元素定位，
接著四個property：top、bottom、right、left
分別代表了與四個方向邊界的距離，
一開始會在top: 0; left: 0;的位置，
如果將兩個相對的位置都設定為0，
就會有置中的效果。

top: 0;
bottom: 0;

left: 0;
right:0 ;

所以我們把四個property都設定為 0
就可以置中囉！

阿鼠其實很可愛對吧??