【转】如何让DIV水平和垂直居中
来源:http://blog.163.com/www.wxs_123/blog/static/82784664201321831746921/
我们在设计页面的时候,经常要把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就可以实现水平和垂直居中,而且兼容各浏览器,这个方法在很多的弹出层效果中应用。
tips:在页面的外面建一个table,设置高度为100%,然后设置td垂直居中显示,把页面套进去就OK拉!
【转】如何让DIV水平和垂直居中的更多相关文章
- 让DIV水平和垂直居中的几种方法
我们在设计页面的时候,经常要把DIV居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示.我们传统解决的办法是用纯CSS来让DIV居中.在本文中,我将给大家讲述如何用CSS和jQu ...
- DIV水平和垂直居中的实现
在div的宽度和高度固定的情况下,实现div水平和垂直居中普遍采用如下的方式: <!DOCTYPE html> <html> <head> <style ty ...
- CSS:使用CSS3将一个div水平和垂直居中显示
使用css3将一个div水平和垂直居中显示 方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 代码两个关键点:1.上下左右均0位置定位: 2.margin: au ...
- 使当前对象相对于上层DIV 水平、垂直居中定位
<!doctype html> <html> <head> <meta http-equiv="content-type" content ...
- CSS3 div水平、垂直居中,IE9以上、Firefox、Chrome均正常
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 一个div相对于外层的div水平和垂直居中
我自己感觉,第四种比较常用 <title>无标题文档</title><style> .parent { width:800px; ...
- 如何设置DIV水平、垂直居中
一.水平居中 需要设置两点: 1 设置DIV 的width属性即宽度. 2 设置div的margin-left和margin-right属性即可 代码: <div style="w ...
- hmtl div水平、垂直居中
最近写网页经常需要将div在屏幕中居中显示,遂记录下几个常用的方法,都比较简单.水平居中直接加上<center>标签即可,或者设置margin:auto;当然也可以用下面的方法 下面说两种 ...
- 如何让一个div水平和垂直居中对齐
以下方法来自百度知道:https://zhidao.baidu.com/question/558984366971173044.html 方法1: .parent { width: 800px; he ...
随机推荐
- Emacs和Ultra Edit列编辑模式
在emacs中可以使用C-r系列组合键进行区域选择编辑,或者使用emacs自带的cua-mode,然后键入C-ret进行可视化列编辑. 使用Ultra Edit同样可以方便的进入列编辑模式,只需要按下 ...
- BZOJ 1600 建造栅栏
O(N)分成1,2与3,4两部分搞一搞. #include<iostream> #include<cstdio> #include<cstring> #includ ...
- 【LeetCode OJ】Binary Tree Maximum Path Sum
Problem Link: http://oj.leetcode.com/problems/binary-tree-maximum-path-sum/ For any path P in a bina ...
- ERP系统上传文档信息下载(十八)
下载的公用方法: /// <summary> /// 下载文档 /// </summary> /// <param name="TableName"& ...
- # 20145210 《Java程序设计》第04周学习总结
教材学习内容总结 第六章 继承 •继承:继承基本上就是避免多个类间重复定义共同行为. 我理解的就是:在编写程序的过程中可能会出现部分代码重复的现象,把重复的部分单独定义为一类(父类),在其他代码中(子 ...
- fibonacci数列(二)_矩阵快速幂
描述 In the Fibonacci integer sequence, F0 = 0, F1 = 1, and Fn = Fn − 1 + Fn − 2 for n ≥ 2. For exampl ...
- dedecms 按照栏目指定的id排序
方法: 1.打开include/taglib/channelartlist.lib.php,找到大约78行,把 代码如下(一定要注意表名一致): $dsql->SetQuery("SE ...
- USB协议-USB的包结构及包的分类
USB是串行总线,所以数据是一位一位地在数据线上传送的.既然是一位一位地传送,就存在着一个数据位先后的问题.USB使用的是LSB在前的方式,即先出来的是最低位数据,接下来是次低位,最后是最高位(MSB ...
- python os.path 模块
os.path模块用法: 1, os.path.basename() >>> os.path.basename('/share/Public/cmiao')'cmiao' basen ...
- (基础篇)PHP字符串操作
PHP是弱类型语言,所以其它类型的数据一般可以直接应用于字符串操作函数里,而自动转换成字符串类型,进行处理,如: echo substr("1234567", 1, 3); 和 ...