響應式佈局之相對瀏覽器垂直居中

此文僅僅作爲知識點的積累，涉及到的小知識如下：

• viewport ：瀏覽器的可視窗口
• vw ：Viewport寬度，1vw 等於viewport寬度的1%
• vh : Viewport高度，1vh 等於viewport高的的1%

頁面中元素的響應式佈局是前端開發工作者經常運用到的，bootstrap的柵格系統雖然很適合響應式佈局，但僅僅是用於頁面寬度變化時的響應，此文承接上一篇，僅在CSS文檔中做配置。

實例要求：

• 父組件在瀏覽器中全屏顯示
• 子組件爲320* 200的圖片
• 子組件始終相對於父組件即瀏覽器垂直居中。

HTML部分：

<div class="fu">
   <img src="./myIcon.png" class="zi" />
</div>

CSS部分：

.fu {
     width: 100%;
     height: 100%;
}
.zi {
     width: 320px;
     height: 200px;
     position: relative;
     top: calc(50vh - 100px);
     left: calc(50vw - 160px);
}

不用再監測瀏覽器窗口變化來動態的設置參數，CSS中自動響應瀏覽器窗口變化更改參數值。這種方法在一父多子的響應式頁面效果更爲突出。