让div在body中水平和垂直居中
我们在设计页面的时候,经常要把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就可以实现水平和垂直居中,而且兼容各浏览器,这个方法在很多的弹出层效果中应用。
让div在body中水平和垂直居中相关推荐
- DIV或者DIV里面的图片水平与垂直居中的方法 - 站住,别跑 - 博客园
DIV或者DIV里面的图片水平与垂直居中的方法 <div class="box"><img /> </div> 水平居中的常用方式: text- ...
- 实现div元素和文字水平及垂直居中的方法(超简单,适应各种场合)
实现实现div元素和文字水平及垂直居中的方法如下: div元素水平居中:style="margin:0 auto" div元素垂直居中:style="padding: ( ...
- 如何让DIV相对于body水平和垂直居中
我们在设计页面的时候,经常要把DIV居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示.我们传统解决的办法是用纯CSS来让DIV居中.在本文中,我将给大家讲述如何用CSS和jQu ...
- div在body中水平垂直居中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- DIV和Table的水平、垂直居中
2019独角兽企业重金招聘Python工程师标准>>> 一般图片的居中问题容易解决,我的解决方法是通过样式设置: background-image:url(path) //链接图片 ...
- 用JavaScript和CSS实现“在页面中水平和垂直居中”的时钟
思路:实现起来最麻烦的事实上是水平居中和垂直居中,当中垂直居中是最麻烦的. 考虑到浏览器兼容性,网上看了一些资料,发如今页面中垂直居中确实没有什么太好的办法. 于是就採用了position:fixed ...
- vue垂直布局_前端页面布局中水平、垂直居中问题
前言 两年前工作时开的博客,一年前写了两篇博文,然后就到了现在才重拾起笔.原因有二,一是自觉技术不足,二曰懒. 最近由于在项目中遇到需求为拖动列可调整列顺序的表格,最后找到一款基于JQuery名为Da ...
- 使用纯CSS实现未知尺寸的图片(但高宽都小于500px)在500px的正方形容器中水平和垂直居中。你有几种方法?
解决这个问题有多种方法 1.使用css hack 处理ie6下的问题. 2.嵌入其它标签使其垂直居中. 方法一: .box { /*非IE的主流浏览器识别的垂直居中的方法*/ ...
- css图片在盒子里居中,让图片在div盒子中水平垂直居中
//调整多张图片,让图片水平垂直居中 function adjustImg(){ let imgDiv = document.getElementsByClassName("img" ...
最新文章
- 一个星期+4轮面试终拿下offer,极致干货
- socket(套接字)详解一种通讯机制
- hive ALLOW_UNQUOTED_CONTROL_CHARS
- MFC对话框中的工具栏、状态栏设计小结
- pod 的亲和性,反亲和性 实验
- Dependence Injection
- gps84转换gcj02公式_百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换...
- python函数作用域与闭包_python函数名称空间与作用域、闭包
- jenkins java常用插件下载,Jenkins简单介绍以及插件入门
- 安徽关节式焊接机器人_机器人自动焊接技术的优势及应用介绍
- linux开源游戏_2014年杰出的开源和Linux游戏
- 80后智能科技公司诚聘业务人员
- 送起来oracle,十一,送你 51 个 Oracle 常用语句~
- 【JavaWeb】(血泪踩雷史...)Token登录前后端交互及跨域问题
- 【神经网络】{4} ——多元分类
- DSPF28335学习笔记之(1)CMD文件说明
- 无线安全审计工具 Fern WiFi Cracker
- 将某个GitLab上的项目同步到另一个GitLab
- 新手必备pr 2021快速入门教程「三」素材的导入与管理
- 软件测试可以分为哪几个类型?
热门文章
- joomla之T3框架使用教程1----安装
- 创新无止息!闪马智能入选科技独角兽百人团
- Asce‘s Summer Ranking No.11
- 软件批量安装,软件自动安装,一键安装合集
- 阿里云盘电脑版 v2.1.1.407官方pc版
- 转 理解电感的Isat Irms,饱和电流,额定电流
- 电子科技大学计算机学院录取名单,电子科技大学研究生拟录取名单2021整理汇总(各学院)...
- [RPi]树莓派GPIO入门之控制LED灯
- 3D模型学会了「唱、跳、Rap、篮球」,程序员们全沉迷「鸡你太美」
- 判断大盘是否见底的独特指数