CSS动态控制DIV居中

1.所谓的动态:就是即使手动去拖拉浏览器,DIV还是会自动居中

2.之前一直以为这个事情是JavaScript做的,

步骤:通过先获取页面的Height和Width,

然后定义DIV的Height和Width,

最后通过上面的值运算 DIV的top值 = (页面的Heght-Div的Height)/2

DIV的left值 = (页面的Width-Div的Width)/2

而且要想实现动态居中,还得在body中加上 onresize事件·····

总之很麻烦,很恶心,不过有一个优点,就是兼容绝大部分的浏览器

3. 后来查询资料发现,同样的动作居然用CSS也可以完成,而且更加简单,

对,没错,相当的简单易懂:

假设DIV控件的id是 popDiv:

#popDiv {

/*就是这个position:fixed起作用,生成相对定位的元素,相对于其正常位置进行定位。*/
     position:fixed;

/*这里都是对外边距进行设置*/
     margin:auto;
     left:0;
     right:0;
     top:0;
     bottom:0;

/*设置div的宽和高*/
     width:400px;
     height:280px;

/*设置超出范围后,就隐藏超出的部分*/
     overflow: hidden;

/*设置边框*/
     border: 2px solid #AEBBCA;

/*设置背景颜色*/
     background-color: #EEF1F8;

/*设置鼠标的样式*/
     cursor: move;
     }

可以点击这里恶补以下position的知识:http://www.w3school.com.cn/cssref/pr_class_position.asp



     优点:没错,就这样就可以实现我们的要求了,不仅居中,而且是动态居中

               (不管是否有滚动条,或者拉动滚动条,或改变浏览器大小,这个div都始终居中显示在浏览器中)

     缺点:不支持恐龙级别的古老神器IE6.0以下的浏览器

时间: 2024-10-06 06:03:18

CSS动态控制DIV居中的相关文章

用CSS控制DIV居中失效的解决方法

1.一般情况下DIV居中失效是因为没写DTD语句 在页面的最上方加上: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.100sucai.com 就可以了!其实其他很多css的问题也是因为没有加上dtd语句引起的. 2.使用margin来让

div居中代码 DIV水平居中显示CSS代码

如何使用CSS让DIV居中显示,让div水平居中有哪些CSS样式呢? 需要的主要css代码有两个,一个为text-align:center(内容居中),另外一个为margin:0 auto:其两个样式需要配合使用才能实现div盒子的居中显示排版. 首先我们对body设置text-align:center,再对需要居中的div盒子设置css样式margin:0 auto,这样即可让对应div水平居中. 实例讲解div居中代码应用,为了观察div居中效果,我们对div设置一个div命名为".div&

CSS中怎么让DIV居中(转载)

CSS 如何使DIV层水平居中 今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性, 网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题. 可是事实上这样的方法科学吗? 经过网络搜索和亲自实验得出以下结论: 正确的也是对页面构造没有影响的设置如下: 对需要水平居中的DIV层添加以下属性: margin-left: auto; margin-right: auto; 经过这么一番设置问题似乎解决了,在FF中已经居中了,可是在IE中看竟然还是

css中将div定位居中

一直,我是认为定一个width,然后写一句margin:0 auto,就可以,但是有时也会不管用. 例如当我要定一个宽度为700的div,用相对定位定在中间.任你怎么拉伸都是居中. 看实例子       <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script type="text/javasc

CSS中怎么让DIV居中

CSS 如何使DIV层水平居中 今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性, 网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题. 可是事实上这样的方法科学吗? 经过网络搜索和亲自实验得出以下结论: 正确的也是对页面构造没有影响的设置如下: 对需要水平居中的DIV层添加以下属性: margin-left: auto; margin-right: auto; 经过这么一番设置问题似乎解决了,在FF中已经居中了,可是在IE中看竟然还是

HTML CSS 中DIV内容居中汇总

转载博客(http://www.cnblogs.com/dearxinli/p/3865099.html) (备注:DIV居中情况,网上谈到也比较多,但是这篇文字,相对还是挺全面,现转载,如果冒犯,还望博主见谅) 在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的确是有vertical-align属性,但是它只对(X)HTML元素中拥有valig

(css+div)整个div居中

整个div居中:margin: 0 auto; div设置边框: border: 1px   solid #666699; div左右同一高度悬挂定位: float: left;     clear: left; float: right;     clear: right; 设置背景图像不平铺:background-repeat:no-repeat; 设置留白(上下左右):padding-top:20px;

table /div 居中的几种实现方法

综述:虽然CSS提供了vertical-align属性来设置居中,但它只对提供了vertical-align特性的元素才使用,比如说<td><th><caption>,而<div><span>则是没有valign属性的. 一.div居中的实现方法: 1. div内只显示单行元素时:只要给容器设置 line-height 和 height,并使两值相等,再加上 over-flow: hidden 就可以了. 缺点:只支持单行文本,不支持对图片的居中

HTML和CSS中的居中效果(1)

HTML和CSS中的居中效果 单行上下左右居中 Html: <div class="container"></div> CSS: .container{ width: 600px; height: 300px; text-align: center; line-height: 300px; border: 1px solid green; } 固定高宽上下左右居中 Html: <div class="container"><