通过JavaScript使Div居中
通过JavaScript使Div居中
在使⽤Java做后台的时候，都会做到登录的页⾯，但是⾃⼰的页⾯太难看了，要居中没居中，要颜⾊没颜⾊，但是⽆论是怎么样都得使登录的框居中吧！以前的想法是通过CSS+Div使div居中，⾃⼰写很困难，但是现在的想法变了，通
过JavaScript可以简单的使Div在页⾯上居中，随着⽹页⼤⼩的改变做出相应的改变。⽽且只要明⽩了居中的原理轻⽽易举的就可以实现了。
先看⼀下居中的原理吧!
先看⼀张图。
从图中看到了什么？可以看到红⾊的框居中了，为什么会居中呢？通过观察可以发现红框的上下的蓝⾊的间距线是⼀样长的，这样可以确保了垂直居中，红框的左右的绿⾊间距线也是⼀样长的，这样可以确保了⽔平居中。
但是怎么使上下的间距相等呢？左右的间距相等呢？
在看⼀张图：
假设当前⽹页的⾼为350px，宽为400px，⽽红框的⾼为150px，宽为200px，我们可以发现⽹页的⾼减去红框元素的⾼得到200px像素，⽽这200px像素正是上下边距的总和，上下边距各得到了100px，同理，左右也是⼀样的。
有没有感觉到什么？
如果我们知道了⽹页元素的⾼或宽，减去元素的⾼或宽，然后在除以2，就得到了上下左右边距的距离。我们通常给元素的定位是怎么定的呢？不都是通过top和left的坐标定的吗？那么现在红框的坐标是什么呢？
再看⼀张图：
红⾊框的坐标是蓝⾊的上线100px，和绿⾊的左线100px，即left和top的值，这两个值不是算出来的吗？
可以总结⼀个公式：
居中的元素的top =（⽹页⾼ –元素的⾼）/ 2;
居中的元素的left= (⽹页宽 –元素的宽) /2;
转化为JavaScript的语法为：
top = (document.body.clientHeight - element.offtHeight)/2;
left = (document.body.clientWidth - element.offtWidth)/2
获取到top和left的坐标不就居中了。
以下是居中的完整代码：
这⾥要注意⼏个问题，要设置元素的position的属性为absolute，即绝对定位，然后添加两个事件onload和onresize，要加上px的字符串，offtHeight是获取元素⾃⾝的⾼，offtWidth是获取元素⾃⾝的宽，这就是当⽹页加载时和改变⼤⼩
时div都会居中。不过这种做法是居中的元素和⽹页的居中，如果想要⼀个元素在另⼀个元素的内部居
中的话，原理是⼀样的。我们只需要将⽹页的宽和⾼的代码改为另⼀个元素的宽和⾼的代码就⾏了。另⼀个元素的宽和⾼可以通过获取到当前元素的parent元素的⾼和宽。这样也是可以居中的。如果⽤jquery这个框架，那么代码就更简单了。
转载请指明出处。
