首页 > 其他 > 详细

设置DIV块元素在浏览器页面中垂直居中

时间:2016-06-09 13:22:07      阅读:249      评论:0      收藏:0      [点我收藏+]

任务目标

  • 实践HTML/CSS布局方式
  • 深入了解position等CSS属性

任务描述

  • 实现如 示例图(点击打开) 的效果
  • 灰色元素水平垂直居中,有两个四分之一圆位于其左上角和右下角。

任务注意事项

  • 思考不同情况下(如灰色高度是根据内容动态变化的)水平垂直居中的解决方案。
  • 动手试一试各种情况的组合,父元素和子元素分别取不同的 position 值。思考 position 属性各种取值的真正含义,尤其是 absolute 究竟是相对谁而言的。
  • 调节浏览器宽度,灰色元素始终水平居中。
  • 调节浏览器高度,灰色元素始终垂直居中。
  • 调节浏览器高度和宽度,黄色扇形的定位始终准确。

设置DIV块元素在浏览器页面中垂直居中

原文:http://www.cnblogs.com/Tobenew/p/5572195.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!