文档章节

如何让DIV水平和垂直居中

ForingY
 ForingY
发布于 2016/06/26 10:26
字数 663
阅读 180
收藏 3

#程序员薪资揭榜#你做程序员几年了?月薪多少?发量还在么?>>>

我们在设计页面的时候,经常要把DIV居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示。我们传统解决的办法是用纯CSS来让DIV居中。在本文中,我将给大家讲述如何用CSS和jQuery两种方法让DIV水平和垂直居中。 CSS让DIV水平居中 说明,本文中所指的DIV包括HTML页面中所有的元素。 让一个DIV水平居中,直接用CSS就可以做到。只要设置了DIV的宽度,然后使用margin设置边距0 auto,CSS自动算出左右边距,使得DIV居中。

.mydiv{   
    margin:0 auto;   
    width:300px;   
    height:200px;   
}  

但是如果要使DIV垂直方向也居中,恐怕CSS需要修改了。

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可以解决居中。

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就可以实现水平和垂直居中,而且兼容各浏览器,这个方法在很多的弹出层效果中应用。

© 著作权归作者所有

ForingY
粉丝 23
博文 272
码字总数 156129
作品 0
杭州
程序员
私信 提问
加载中

评论(0)

Bootstrap3 与Bootstrap4垂直水平居中

Bootstrap水平居中 // 文本: class ="text-center" // 图片居中: class = "center-block" //其他元素: //bootstrap3水平居中:利用bootstrap列偏移 class = "col-md-offset-4 col-lg-offs......

osc_05umekgg
02/24
11
0
html中div使用CSS实现水平/垂直居中的多种方式

CSS中的居中,在工作中,会经常遇到。它可以分为水平居中和垂直居中,以下是几种实现居中的方式。git 查看源码 配合在线预览,效果更佳 以下例子中,涉及到的CSS属性值。 1: text-align:cent...

osc_nd6644ee
2018/07/27
7
0
CSS 如何使DIV层水平居中

CSS 如何使DIV层水平居中 DIV本身没有定义自己居中的属性, 网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题. 可是事实上这样的方法科学吗? 经过网络搜索和亲自实...

Z_dragon
2014/08/18
75
0
水平居中/垂直居中/水平垂直居中总结

1.1 内联元素水平居中 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>内联元素水平居中</title> 6 <style> 7 div { 8 padding:10px 0; 9 border: 2px dashed #f6......

osc_1p79c9v6
2018/09/06
2
0
如何将一个div水平垂直居中?6种方法做推荐

div绝对定位水平垂直居中【margin:auto实现绝对定位元素的居中】 兼容性:,IE7及之前版本不支持 div{ div绝对定位水平垂直居中【margin 负间距】 这或许是当前最流行的使用方法。 div{ div绝...

osc_s8zboupn
2019/05/10
2
0

没有更多内容

加载失败,请刷新页面

加载更多

如果我有jQuery背景,那么“ AngularJS中的思考”吗? [关闭]

问题: Closed . 已关闭 。 This question needs to be more focused . 这个问题需要更加集中 。 It is not currently accepting answers. 它当前不接受答案。 Want to improve this questio......

技术盛宴
28分钟前
9
0
ArrayList-不常用方法

这篇笔记主要记录一些不常用方法,了解一下可以干什么,有个印象。 改变数组容量 /** * 将该<tt> ArrayList </ tt>实例的容量调整为列表的当前大小。 * 应用程序可以使用此操作来最大程度...

jackdawl
32分钟前
4
0
PCDN+路由器就能赚钱? 揭秘京东云无线宝背后的黑科技

受疫情影响,今年视频直播、点播等在线视频业务迎来了爆发期,看视频成为人们宅在家中的主要消遣方式之一,由此带来的互联网流量增长大幅增加了对 CDN流量的消耗。传统CDN依赖于运营商、IDC...

京东智联云开发者
34分钟前
16
0
Oracle 中关于 group by 的那些坑

分组聚合Group by 在mysql中,对group by 的使用限制是比较宽松,还是比较灵活的, 表数据之间的调取是完全没问题的; 而在Oracle中,对group by 就有一定限制,两句相同的SQL语句,可能在mysql中不...

煌sir
51分钟前
20
0
MySQL服务器的SQL模式

与其它数据库不同,MySQL 服务器可以在不同的 SQL 模式下运行,并且可以针对不同的客户端以不同的方式应用这些模式,具体取决于 sql_mode 系统变量的值。 SQL 模式定义了 MySQL 数据库所支持...

Linux就该这么学
55分钟前
36
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部