DIV水平和垂直居中
2015-06-23 16:23
387 查看
CSS让DIV水平居中
说明,本文中所指的DIV包括HTML页面中所有的元素。让一个DIV水平居中,直接用CSS就可以做到。只要设置了DIV的宽度,然后使用margin设置边距0 auto,CSS自动算出左右边距,使得DIV居中。.mydiv{ margin:0 auto; width:300px; height:200px; }
CSS实现水平和垂直居中
要让DIV水平和垂直居中,必需知道该DIV得宽度和高度,然后设置位置为绝对位置,距离页面窗口左边框和上边框的距离设置为50%,这个50%就是指页面窗口的宽度和高度的50%,最后将该DIV分别左移和上移,左移和上移的大小就是该DIV宽度和高度的一半。.mydiv{ width:300px; height:200px; position:absolute; left:50%; top:50%; margin:-100px 0 0 -150px }该方法使用普遍,但是前提是必需设置DIV的宽度和高度。如果当页面DIV宽度和高度是动态的,比方说需要弹出一个DIV层并且要居中显示,DIV的内容是动态的,所以宽度和高度也是动态的,这时需要用jQuery可以解决居中。
CSS实现水平和垂直居中(不设置宽高)
以上设置方式都需要设置宽高,否则margin不会生效,下面介绍一种无需设置宽高的方式来实现div的居中,需要配合外层的div来进行设置,下面呈现的效果是在body中有一个div:nr,令其中的内容居中显示:body{ padding:100px; //通过设置内边距,间接控制里面div的大小 margin:0px; text-align:center; //设置里面的内容(nr的div)水平居中 vertical-align:middle; //设置里面的内容垂直居中 display:inline-block; //重要:此设置会让div在body中居中 text-align:center; //div没有设置大小,所以内容会充满div,设置其内容居中显示,就相当于在整个body中居中,也可设置其内容左对齐显示}jQuery实现水平和垂直居中
jQuery实现水平和垂直居中的原理就是通过jQuery设置DIV的CSS,获取DIV的左、上的边距偏移量,边距偏移量的算法就是用页面窗口的宽度减去该DIV得宽度,得到的值再除以2即左偏移量,右偏移量算法相同。注意DIV的CSS设置要在resize()方法中完成,就是每次改变窗口大小时,都要执行设置DIV的CSS,代码如下:$(window).resize(function(){ $(".mydiv").css({ position: "absolute", left: ($(window).width() - $(".mydiv").outerWidth())/2, top: ($(window).height() - $(".mydiv").outerHeight())/2 }); });此外在页面载入时,就需要调用resize()。
$(function(){ $(window).resize(); });此方法的好处就是不需要知道DIV的具体宽度和高度大小,直接用jQuery就可以实现水平和垂直居中,而且兼容各浏览器,这个方法在很多的弹出层效果中应用。参考于helloweba.com点击打开链接
让DIV中的内容居中
先说文字居中。此处是垂直居中,关键代码height:105px;line-height:105px;两个值要相等。<div style=' height:105px;line-height:105px;overflow:hidden;border:1px solid #FF0099;' >居中</div>文字横向居中,关键代码text-align:center<div style=' height:105px;line-height:105px;overflow:hidden;border:1px solid #FF0099;text-align:center'>ju zhong</div>图片垂直居中,关键代码display: table-cell; vertical-align:middle;代码如下;<div style=' height:105px;width:300px;line-height:105px;overflow:hidden;border:1px solid #FF0099;text-align:center ; display: table-cell; vertical-align:middle; '><img src="1.png" alt="" /></div>相关文章推荐
- Web布局连载——两栏固定布局(五)
- [div+css]晒晒最新制作专题推广页模板
- 纯CSS制作的新闻网站中的文章列表
- 10条影响CSS渲染速度的写法与使用建议第1/3页
- BS项目中的CSS架构_仅加载自己需要的CSS
- 很不错的 CSS Hack 又学了一招
- 发一个css比较清爽的写法
- CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]
- css布局网页水平居中常用方法
- CSS经典技巧十则第1/2页
- css 兼容性问题this.style.cursor=''hand''
- IE6不能正常解析CSS文件问题的解决方法及原因分析
- 欲练CSS ,必先解决IE的一些细节分析
- CSS文字截取功能实现代码
- 支持IE6 IE7 Firefox 的纯CSS的下拉菜单
- 不同版本IE使用不同css(css条件注释语句用法)
- css类选择器的使用方法详解
- css文本框与按钮美化效果代码
- 解决ie动态修改link样式,import css不刷新的问题
- 用css filter做鼠标滑过图片效果