css样式中div永久居中

转载 2013年12月02日 16:21:00

在网上看了很多, 让div居中,有设置 float:center,text-align:center的方式,但都不够完美。

当然,我这个方法,也是在网上搜到的,只是详细说明一下每一个css属性的含义而已。

  1. <span style="font-size:18px;">.divCenter  
  2. {  
  3.     position:absolute;  
  4.     width:300px;  
  5.     height:160px;  
  6.     left:50%;  
  7.     top:50%;  
  8.     margin-left:-150px;  
  9.     margin-top:-80px;  
  10.     background-color:Green;  
  11. }</span>  

position,既设置绝对定位,以免影响其他控件;

width,height:这个不用说了;

left, top: 50%,这说明什么呢?这说明当我们计算左边距和上边距时,是从body的,中间开始算的。left:50%,说明,以当前屏幕垂直中线为标准;top:50%,说明以当前屏幕的水平中线为标准;

margin-left: 左边距,为负值,说明是以left,既上面提到 的垂直中线为标准,向左边开始计值.;若为正,则是向右开始计值;这里的值应该设置成width的一半,width为300px,则它应该为-150px,这样看上去才会100%距中!

margin-top:道理同margin-left

相关文章推荐

css样式控制元素居中

网页中有时需要使网页中的元素保持垂直方向的居中,不使用JS控制。1.绝对定位居中一般父级是相对定位或者是固定定位,需要垂直方向上居中的元素块是相对定位,而且必须设置高度。 html,b...

CSS样式--居中设置

css样式设置元素水平居中、垂直居中、水平垂直居中的几种方法 .

HTML篇之CSS样式——CSS水平垂直居中对齐(多种方式)

用CSS来实现元素的垂直居中效果是件苦差事,虽然说实现方法有多种,但有很多方式在某些浏览器下可能无法正常的工作。接下来我们就一起来看看这些不同方法实现垂直居中的各自优点和其不足之处。  方法一:  ...

div+css样式表

  • 2014年01月08日 14:16
  • 199KB
  • 下载

div+css样式

  • 2014年06月05日 10:46
  • 32KB
  • 下载

DIV+CSS样式---网易盖楼

网易的评论样式做的好,我天天盖楼,x
  • qqHJQS
  • qqHJQS
  • 2014年08月26日 15:54
  • 1333

打分效果(DIV+CSS样式)

  • 2008年09月05日 10:23
  • 867B
  • 下载

JS封装DIV圆角Css样式

  • 2012年06月08日 12:54
  • 102KB
  • 下载

css样式之页面上拉指定div置顶

最近做项目写页面用到一个功能效果——–>当页面滑动过程中,如果标题部分已经到顶部了,那么标题部分就应该被置顶而不是随着页面内容而消失。完成这种效果只要两步: 1.获取窗体Y轴滚动事件,来获取...

50个div和css样式

  • 2017年06月28日 16:47
  • 11.39MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css样式中div永久居中
举报原因:
原因补充:

(最多只允许输入30个字)