响应式布局之相对浏览器垂直居中

此文仅仅作为知识点的积累，涉及到的小知识如下：

• 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中自动响应浏览器窗口变化更改参数值。这种方法在一父多子的响应式页面效果更为突出。