码迷,mamicode.com
首页 > 其他好文 > 详细

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

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

标签:

任务目标

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

任务描述

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

任务注意事项

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

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

标签:

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!