昨天兩天做了水平置中，
今天來試試看垂直置中。
<div class="animalCage">
<p>A 350 grams Rat</p>
</div>
.animalCage {
font-size: 24px;
color: #fff;
background-color : #00aa00;
height : 300px;
width : 300px;
text-align : center;
}
將行高設定跟div的高度一樣。
line-height: 300px;
這個方法垂直置中只能使用一行字，
如果加上另外一行，
會因為行距的關係使得字飛出框框之外。
iThome鐵人賽
看影片追技術