任务目标
- 实践HTML/CSS布局方式
- 深入了解position等CSS属性
任务描述
- 实现如 示例图（点击打开） 的效果
- 灰色元素水平垂直居中，有两个四分之一圆位于其左上角和右下角。
任务注意事项
- 思考不同情况下（如灰色高度是根据内容动态变化的）水平垂直居中的解决方案。
- 动手试一试各种情况的组合，父元素和子元素分别取不同的 position 值。思考 position 属性各种取值的真正含义，尤其是 absolute 究竟是相对谁而言的。
- 注意测试不同情况，尤其是极端情况下的效果。
- 调节浏览器宽度，灰色元素始终水平居中。
- 调节浏览器高度，灰色元素始终垂直居中。
- 调节浏览器高度和宽度，黄色扇形的定位始终准确。
- 其他效果图中给出的标识均被正确地实现，错一项扣一分。
任务完成及总结
这次任务布局是利用position和margin负值完成，难度不是太大。唯一需要理解的就是为什么margin要设置盒子宽度一半的负值，原因就是绝对定位（position）是以盒子左上角为中心进行定位，而不是以盒子的中心进行定位。
更多的垂直居中案例请戳这里：
http://www.cnblogs.com/coco1s/p/4444383.html
http://www.myexception.cn/flex/2025243.html
小demo地址：
https://cruxf.github.io/BaiduTask/test4.html